React Router -使用片段的路由无法工作
React Router是一个用于构建单页面应用的路由库。它允许开发者在React应用中实现页面之间的导航和路由功能。React Router提供了一组组件，如Router、Route和Link，用于定义路由规则和创建导航链接。
对于使用片段的路由无法工作的问题，可能是由于以下原因导致：
- 片段路由未正确配置：React Router支持使用片段（hash）作为路由的一部分。但是，要使片段路由正常工作，需要确保正确配置了Router组件，并将其包装在BrowserRouter或HashRouter组件中。例如，可以使用BrowserRouter组件来配置基于HTML5 history API的路由，或者使用HashRouter组件来配置基于URL片段的路由。
- 片段路由未正确定义：在使用片段路由时，需要在Route组件中定义相应的路径和组件。例如，可以使用<Route path="/example" component={ExampleComponent} />来定义一个路径为/example的路由，并将其对应的组件设置为ExampleComponent。
- 片段路由未正确导航：如果片段路由无法正常工作，可能是由于导航链接未正确设置。在React Router中，可以使用Link组件来创建导航链接。确保在导航链接中正确设置了目标路径，例如<Link to="/example">Example</Link>。
总结起来，要解决使用片段的路由无法工作的问题，需要确保正确配置了Router组件，正确定义了路由路径和组件，并正确设置了导航链接。
腾讯云提供了Serverless Cloud Function（SCF）服务，它是一种无服务器计算服务，可以帮助开发者在云端运行代码，无需关心服务器的配置和管理。SCF可以与React Router结合使用，实现无服务器的单页面应用。您可以通过腾讯云SCF官网了解更多信息：腾讯云SCF。
相关·内容
2回答
React BrowserRouter <Link>不加载接受"/‘精确路由-已定义路径“的组件
javascript、reactjs、typescript、react-router、url-routing
我的导航组件代码
import { BrowserRouter as Router, Link } from "react-router-dom";
<Router>
<header>
<ul className="social">
{/* Couldn't figure this out */}
{/* Link doesn't route properly but a href does */}
&l
浏览 18提问于2019-11-25得票数 0
1回答
React路由器更改URL，但即使使用withRouter也不呈现页面
reactjs、react-router
我花了一整晚的时间复习了所有其他有同样问题的StackOverflow问题。我在每个我可能使用它的地方都使用过。只有当我将导航栏放在switch语句的正上方时，我才能使路由正常工作。然而，这对我的应用程序并不好，因为我正在使用侧边抽屉来放置我的导航链接。我的URL正在改变，但是，什么都没有呈现。我使用的是React路由器4.3.1。这是我整个网站的一个问题，如果我真的点击了enter或重新加载，路由就会起作用。这是我的设置。 Index.js import React from 'react';
import ReactDOM from 'react-dom'
浏览 25提问于2019-03-17得票数 0
6回答
试图导入错误：“useRouteMatch”不是从“react路由器-dom”导出的。
reactjs、react-router、react-router-dom
当我尝试从react路由器-dom模块导入useRouteMatch时，我有这个错误，我有以下错误：
试图导入错误：'useRouteMatch‘不是从’react router‘导出的。
我是否有一个错误版本的反应-路由器-多姆模块？
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
我查看了模块的导出，实际上，它没有导出。我有错误的版本吗？
i
浏览 6提问于2019-10-15得票数 21
回答已采纳
1回答
如何在反应中用BrowserRouter代替HashRouter
javascript、reactjs、react-router、react-dom
目前我正在使用BrowserRouter，但实际上Git页面不能与BrowserRouter一起工作，所以我们需要使用HashRouter。我很难接受这一转变。
这就是它在本地使用BrowserRouter的工作方式。
import "./App.css";
import { BrowserRouter, Routes ,Route } from 'react-router-dom';
import Home from './components/Home';
import NavigationMenu from "./component
浏览 3提问于2022-08-14得票数 1
2回答
如何通过HashRouter使用<Link>更改位置的路径名
reactjs、react-router、react-router-v4
我使用HashRouter。假设我想导航到http://localhost:8089/abc/#/home，我可以使用window.history.pushState({}, '', 'http://localhost:8089/abc/#/home')来完成。
我的问题是如何使用react-router的<Link>接口来做同样的导航。我试过<Link to="/#/home">，它不工作。
问题2:我得到了一个url http://localhost:8089/abc/#/app1，我想导航到http://localh
浏览 1提问于2020-02-24得票数 1
2回答
在react js中路由器不工作时的路由
reactjs、react-router-dom
我正在使用路由器提供指向导航菜单的路由链接，但它似乎在我的index.js中不起作用
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.m
浏览 0提问于2018-09-30得票数 0
3回答
SRA - Single Page React应用程序-当托管到GitHub时，不会加载存储“交换机”路由器代码的组件
reactjs、deployment、single-page-application、github-pages
我到处寻找这个问题的答案--我非常确定这是我在React应用程序中布局组件的方式：
在React中制作我的投资组合页面时，我使用了CREATE REACT应用程序，在它完成并在本地正常运行后，我对主页和构建等的package.json文件进行了必要的更改。然后，当我使用Yarn部署时，主机链接将打开我的网站-但没有我的一个组件:内容。该组件包含一个开关，根据路由，该开关将在包含该路由的页面正文中显示适当的内容。
当我点击导航栏时，它会将我带到三条路线中的任何一条--包括一个正确显示的主页--但只有在页面首次加载并点击导航栏之后，主页才会显示出来。
为什么会这样呢？再说一次-它在本地运行得很好，
浏览 3提问于2018-11-15得票数 2
1回答
指向在react中不工作的链接
javascript、reactjs、react-router、reactive-programming
我有一种情况，在点击div元素时，浏览器应该导航到不同的页面。在此事件的onClick中，我更改了状态变量的值，并在链接标记中将值传递给下一个组件。
代码是这样的-
import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import {Switch, BrowserRouter as Router,Route,Link} from 'react-router-dom'
import {FullBlog} from
浏览 0提问于2017-07-22得票数 1
2回答
响应，管理不同的路由器历史记录
javascript、reactjs、react-router、browser-history
我的网站上有一个BrowserRouter服务/，/login和/logout。登录时，您可以访问每个页面上都有相同导航条的应用程序，以及保存数据/功能的动态内容。这个模板组件"Main“有一个HashRouter来服务应用程序的不同页面。
我在导航栏"CMNav“中添加了一个搜索表单，但是当用户验证表单时，我不得不使用历史来重定向。
CMNav通过withRouter访问BrowserRouter的历史，但是不能看到HashRouter的历史，因为他是在同一级别上定义的。
因此，当我键入一个搜索并点击enter键时，我的URL会更改为/search，但是对搜索组件的重定向没有
浏览 1提问于2020-03-02得票数 0
回答已采纳
1回答
如何使react路由器基于url更改正在呈现的文件
reactjs、react-router-dom
我一直在与反应路由器工作，这只会给我带来麻烦。我想要一个按钮来加载一个新的页面，我想要的是有一个类来切换它的基于链接的呈现文件。我可能使用了错误的东西，但任何正确的方向上的推动都会很好。
这是我的三个主要文件
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouteFile from './RouteFile';
import reportWebVitals from '.
浏览 3提问于2021-04-09得票数 2
回答已采纳
1回答
在标题和页脚上调用BrowserRouter时，内容将显示两次
reactjs、react-router
大家好，我在学反应。我已经在Headers.js上为路由编写了代码，并添加了链接以显示在导航栏上。我想在页脚上显示相同的链接，所以我创建了footers/index.js。我在src/index.js上导入了footers/index.js和头，不幸的是，页面内容在根页面上显示了两次，一次用于页眉，另一次用于页脚，如这个url所示：
Headers.js
import React from 'react';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';
import
浏览 5提问于2017-09-20得票数 0
回答已采纳
1回答
嵌套路由不起作用。
reactjs、react-router
我试图在我的节点应用程序中使用嵌套路由。最初，我在我的App.jsx中拥有了所有的路由，并且它工作得很好。我决定使用嵌套路由来更好地处理从子到父的数据。
当我设置嵌套路由时，页面会转到url，但我的组件没有呈现。我把路线放回我的App.jsx里，一切都很好。
我尝试过HashRouter而不是BrowserRouter，因为我的应用程序(目前)只呈现静态页面，但没有帮助。
我还使用了下面链接中引用的更新阻止程序，但是遗憾的是，它也不起作用。
请帮帮这个新手！
Index.jsx
import React, {Component} from 'react';
import {
浏览 0提问于2018-08-14得票数 0
3回答
正在从HashRouter中删除#
reactjs、react-router、react-router-dom
我使用react-router-dom进行路由，而且由于我也使用GitHub页面，所以我需要在Router.jsx中使用HashRouter，如下所示
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Customer from './Customer';
const MyRouter = () => (
浏览 0提问于2018-03-13得票数 6
4回答
如何在Reactjs中使用导航栏链接？
javascript、reactjs、react-router、navbar
我正在尝试使用Reactjs创建一个网站。我尝试创建导航栏，在导航栏上，我创建了2个链接，这是主页和联系人。当我点击example contact按钮时，我可以在URL上看到端点，但在页面上，什么也没有发生。我已经创建了路由和链接，但我真的不明白为什么我不能使用导航栏的链接。你能帮帮我吗？提前谢谢你。
import React from 'react';
import PropTypes from 'prop-types';
import {BrowserRouter, Link} from "react-router-dom";
const
浏览 7提问于2018-09-10得票数 1
1回答
反应路由器不能工作，控制台或编译错误没有错误显示[反应路由器多姆v5]
reactjs、react-router、react-router-dom
直到现在，路由器工作得很好，但是突然之间它就不能工作了。我完全糊涂了，我还没做过任何升级。
路由器不呈现组件本身。我想知道是否甚至正确的路由是基于路径来呈现的。
只有第一条路运行得很好，另外两条似乎行不通。
AssetPage.js
import React from "react";
import { Route } from "react-router-dom";
import AssetNavBar from "./AssetNavBar";
import "./assets.css";
function AssetPag
浏览 4提问于2022-03-01得票数 1
回答已采纳
2回答
React路由器交换机行为
reactjs、react-router、react-router-v4、react-router-dom
(react-router-dom版本: 4.1.1)
我已经设置了工作路由，但我有点困惑为什么需要<Switch>：
index.js
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import App from './components/App.jsx';
import FridgePage from './components/FridgePage.jsx';
ReactDOM
浏览 1提问于2017-07-16得票数 52
1回答
React路由器需要帮助路由
reactjs、react-router
我是一个初学者前端开发，我试着做一个虚构的网站。我正在学习如何对路由器做出反应。所以，当我试图点击家庭/关于或联系按钮，它不会打开它。我做错了什么？
下面是我的代码：
我的应用程序代码：
import React from 'react';
import './App.css';
import Navibar from './Components/Navibar';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Hom
浏览 2提问于2022-12-03得票数 1
2回答
路由器与React.js重定向
reactjs、react-router、react-router-dom
我是个反应新手。我试图设置路由器和渲染来改变页面，但是它给了我一些我无法理解的错误。
我在我的index.js中安装了终端index.js，我已经导入BrowserRouter并嵌入了我的应用程序。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
imp
浏览 9提问于2022-02-16得票数 2
回答已采纳
1回答
未使用react路由器v5呈现的组件
javascript、reactjs、frontend、react-router-dom、single-page-application
我目前在reactjs项目、仪表板网络应用程序中工作。我也是使用反应路由导航内容在网站上。
我有这样的网络应用。
当我单击侧边栏中的“仪表板”时，它会正确地显示内容。当我点击侧边栏上的'Antrian‘的时候。
但是当我点击'Antrian‘内容或页面中的'Ke Form’。它不会呈现下一个组件。[！]
()]()
我想改变页面中的内容。不仅仅是在侧边栏。以下是我从web应用程序获得的版本: react : 16 react路由器-dom: 5.3.0
来自index.js代码：
// import resources and library
import
浏览 10提问于2022-11-24得票数 2
回答已采纳
1回答
无角出口的航路导航试验
unit-testing、angular、angular2-routing、angular2-testing
我正在为一个显示按钮的角度组件编写一个规范，该按钮将导航到另一个页面。该组件使用Router::navigate()，但它本身没有路由器出口。父组件具有出口。在我的规范中，测试应该确认单击按钮路由到正确的路径。
我当前的(已损坏的)规范试图使用RouterTestingModule来提供到DummyComponent的路由。当在规范中单击按钮时，我会得到以下错误：
'Unhandled Promise rejection:', 'Cannot find primary outlet to load 'DummyComponent'', '
浏览 1提问于2017-03-28得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
