React项目中的正确路由问题
是指在React应用中如何正确配置和管理路由，以实现页面之间的跳转和导航。
在React中，可以使用React Router库来处理路由。React Router是一个用于构建单页面应用的强大路由库，它提供了一些组件和API来帮助我们管理应用的路由。
首先，需要安装React Router库。可以使用npm或yarn来安装：
npm install react-router-dom或
yarn add react-router-dom安装完成后，可以在应用的根组件中配置路由。一般来说，可以使用BrowserRouter组件作为根组件的包裹组件，它会为应用提供路由功能。例如：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}在上面的例子中，Router组件是根组件，Switch组件用于选择匹配的路由，Route组件定义了不同路径对应的组件。
exact属性用于精确匹配路径，只有当路径完全匹配时才会渲染对应的组件。path属性定义了路由的路径。component属性指定了对应路径的组件。
除了Route组件，还可以使用Link组件来创建导航链接。例如：
import { Link } from 'react-router-dom';
function Navigation() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}上面的例子中，Link组件用于创建导航链接，to属性指定了链接的目标路径。
React Router还提供了其他一些功能，如嵌套路由、路由参数、重定向等。可以通过查阅React Router的官方文档来了解更多详细信息。
腾讯云提供了一些与React项目中的路由相关的产品和服务，例如：
- Serverless Framework：用于构建无服务器应用的全托管框架，可以方便地部署和管理React应用的后端逻辑。
- API 网关：用于构建和管理API接口的服务，可以帮助React应用与后端服务进行通信。
- CDN：用于加速静态资源的分发，可以提高React应用的加载速度和用户体验。
以上是React项目中正确路由问题的答案，希望能对您有所帮助。
相关·内容
我是新的反应，并正在学习如何正确地使用反应路由器与反应所有的一起。如您所知，React路由器被分为三个包:react路由器、react路由器-dom和react路由器-原生包。因此，在默认情况下，反应路由器和反应路由器都有反应路由器.问题是，反应路由器和本机反应路由器都包括反应路由器，那么为什么要将反应路由器作为单独的包呢？
浏览 5提问于2019-10-27得票数 2
回答已采纳
4回答
我正在构建一个共享组件库()。我想包括一个PrivateRoute组件。但是，当我将组件从模块库导入到另一个应用程序时，我会得到一个错误：
错误:不变失败:不应在
PrivateRoute组件用身份验证逻辑包装react-router/Route组件，并重定向未经身份验证的请求以登录：
component-library
import { Route, Redirect } from 'react-router';
/* ... */
class PrivateRoute extends Component {
/* ... */
render() {
浏览 1提问于2019-06-21得票数 12
回答已采纳
我正试图正确地(使用React+Typescript )对我的ESLint项目进行修改。我有一个组件，在其中我要从react-router导入react-router钩子。
import { useParams } from 'react-router';
ESLint在那一行上给了我错误
ESLint: '@types/react-router' should be listed in the project's dependencies, not devDependencies.(import/no-extraneous-dependencies)
浏览 5提问于2022-06-16得票数 1
2回答
在以前使用Reach路由器的项目中，我正在设置React路由器。
在此之前，路线看上去是这样的：
import { Router } from '@reach/router';
...
<Router>
{anon ? <AnonHomepage /> : <Homepage />}
<Explore path="explore/:category" />
</Router>
然后，切换到React路由器，我的文件设置如下：
import { BrowserRouter, S
浏览 1提问于2019-07-09得票数 2
回答已采纳
1回答
我已经使用Yeoman生成器创建了一个全新的Excel加载项，并选择了React窗格选项。
我正在尝试构建一个扩展，它将为加载项的不同特性提供多个页面，所以我安装了并编写了一些基本的路由，就像我在一个常规的React应用程序中所做的那样。但是，每当尝试访问路由时，都会在Excel的加载项窗格中显示此Cannot GET /insert错误。
这是我在App.js文件中的代码：
return (
<div>
<nav>
<Link to="/">Login</Link> | <L
浏览 3提问于2020-04-28得票数 0
回答已采纳
1回答
当我在我的终端上加载我的应用程序时，我使用react本机与世博一起运行我的应用程序，我有这个错误。
有些依赖项与已安装的expo包版本不兼容：
@react-native-community/masked-view -预期版本: 0.1.10 -实际安装版本: 0.1.11您的项目在安装正确的软件包版本之前可能无法正常工作。要安装这些软件包的正确版本，请运行:世博安装软件包-名称.缺少在: C:\Users\kabore\Desktop\react_native\app1的项目中的包"metro-config“--这通常意味着react-native没有安装。请验证package.js
浏览 1提问于2021-10-25得票数 0
我在一个当前的iOS React Native项目中遇到了一些问题，我花了很长时间在这个项目上。我决定重新开始。然而，我确实花了很多时间来确保我获得了各种react本机模块的正确版本，并对它们进行了配置。这些文件位于我以前的'node_modules‘文件夹中。
我可以将这些模块/文件夹(从旧的'node_modules')复制到我的新项目中吗？我是否需要更新'package.json‘或使用'react-native link xxxxx’的链接？理论上有这么简单吗？
浏览 1提问于2019-07-02得票数 2
我们有一个以react为前端的Laravel项目。基本上react是在laravel项目中，我们使用php artisan preset react来添加它。
由于该应用程序需要身份验证，因此我们使用自定义的laravel对用户进行访问。然后，当身份验证正确时，我们将用户重定向到一个将由react和route路由器管理的路由。问题是，我们需要从同一个应用程序中使用API端点，而这些端点必须受到保护。laravel Auth没有在那里工作，没有根据每一项请求发送塞西翁的资料。我尝试过，尽管它解决了这个问题，但是登录并不方便，然后当想使用另一个资源时，显示一个提示再次登录。另外，将api路由更改到
浏览 2提问于2018-10-10得票数 1
回答已采纳
当页面第一次加载时，脚本将被调用，页面将正确显示。当我使用react-router切换页面路由时，javascript不会重新运行，因此我最终得到了一个空的div。下面是我的代码：
import React, { useEffect } from "react";
const ServiceCard = props => {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://assets.ub
浏览 1提问于2020-02-27得票数 0
1回答
在之后，我在我的项目中创建了以下文件：
/page/user/id.js
class Post extends Component {
render() {
return (
<React.Fragment>
<Navbar />
<Content />
<Footer />
</React.Fragment>
);
}
}
export de
浏览 0提问于2019-09-16得票数 0
回答已采纳
1回答
我想要获得react路由器的类型，但是当您在package.json中依赖于此时：
{
"@types/react-router": "^4.0.3"
}
它使用来自DefinitelyTyped库的标准DefinitelyTyped(对react路由器1.0是正确的)。
我知道DefinitelyTyped中有文件夹--我相信v3会有我想要的任何东西。
如何在项目中使用v3文件夹？
我是否必须手动输入文件夹中的类型，还是已经有了一个自动化的方法？
浏览 2提问于2017-03-29得票数 0
回答已采纳
我是Vue.js的新手。我正在做演示项目。在我的项目中，我有三个不同的导航栏。第一个用于HomePage，第二个用于登录/注册页面，第三个用于仪表板。在像React和Vue这样的框架中，我们为所有页面设置一个全局导航栏。如何有条件地呈现这三个导航栏组件？这方面的最佳实践是什么？我想设置vuex来解决这个问题，这是一个正确的方法吗？
浏览 91提问于2020-12-07得票数 0
回答已采纳
我试图弄清楚为什么下面的页面在手动刷新后会出现404错误(F5)。一开始它可以正常加载，但是如果我只刷新这个页面，它就会转到404。它的主要依赖"Meeting“组件没有这样的问题。它可以很好地刷新。只想让你知道React应用程序是在一个.NET MVC项目中构建的，只有一部分视图是由React处理的。你知道我应该做错什么吗？ #App.tsx
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 're
浏览 12提问于2019-06-27得票数 1
我可以尝试在反应本机专案中加入反应本机路由器流量，但在执行专案时会有错误，请不要截图。。
{
"name": "AsseProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "rea
浏览 4提问于2020-02-17得票数 0
回答已采纳
13回答
在我的项目中，我使用了react路由器-dom 4.0.0-beta.6。我有如下代码：
<Route exact path="/home" component={HomePage}/>
我希望在HomePage组件中获得查询参数。我找到了location.search param，它看起来像这样：?key=value，所以它是未解析的。
使用react路由器v4获得查询参数的正确方法是什么？
浏览 2提问于2017-04-04得票数 104
回答已采纳
我遇到了一个问题，在上游模块中，我的browserHistory.push()操作无法工作。URL中发生的情况是地址栏更新，但是页面的内容不会改变。上游和下游模块都在使用react路由器版本3.0.5。
上游模块中的测试组件是：
import React from 'react';
import { browserHistory } from 'react-router';
export default function render (props) {
return (
<div className="container
浏览 3提问于2017-08-19得票数 0
回答已采纳
我想用Perf的东西。看来如果我这么做了：
var React = require('react/addons');
在我自己的模块中，然后是库(react-bootstrap，react路由器等)最后使用另一份普通反应的副本，事情就会破裂。我用的是褐化。
有什么办法可以解决这个问题吗？
浏览 2提问于2015-05-26得票数 2
回答已采纳
1回答
我有一个使用流进行静态类型检查的React项目；我使用flow-typed安装了npm第三方库的libdefs。但是，有时无法识别这些类型。例如，下面是使用react-router-dom npm包的React组件，在使用来自相应flow-typed/npm/react-router-dom_v4.x.x.js的类型时会出现identifier ... Could not resolve name流错误。
但是，该类型在libdef中：
我正在与其他flow-typed类型一起这样做，而且它正在工作。我已经确认在package.json中安装了最新的库，并安装了最新的相关f
浏览 3提问于2017-07-03得票数 2
我使用编写了这个npm模块。当我在一个新的项目npm i react-heartbeat中安装这个模块时，在运行npm init之后，它所用的时间不到2秒，只安装了一个包。当我安装这个模块时，同样是npm i react-heartbeat，在用create-react-app创建一个项目之后，它需要将近3分钟，添加420个包，删除218个包，并更新1257包。
我做错什么了？
我的npm模块非常简单，只是。它在文件中没有依赖项。下面是在nwb设置项目时创建的对等依赖项和dev依赖项。
"peerDependencies": {
"react": "
浏览 7提问于2018-10-18得票数 2
回答已采纳
1回答
我在我的项目中使用了Reactive路由器4，当我直接向浏览器(如localhost:8000/post/1 )输入url时，我会得到以下错误。
无法获得/邮寄/1
我在快递服务器上的代码是
app.get('/post/:id', function (req, res) {
res.sendFile('./public/index.html', {root: __dirname});
})
我试着在react-router-dom上使用react-router-dom包来允许散列，但它似乎也不能正常工作。
如何纠正此错误？并允许在我的项目中直接链接
浏览 2提问于2017-07-23得票数 1
回答已采纳
我们有一个React项目，在这个项目中，我们使用react-router进行路由选择。现在，我们将开发本地应用程序，一旦again.Here (我对此有疑问)，我们将不得不实现路由，
我也可以对本地应用程序使用相同的包(react-router)吗？
我问的原因是我读过一篇文章()，其中列出了多个导航器，其中没有列出react-router。
浏览 4提问于2017-10-09得票数 0
回答已采纳
5回答
我需要在Laravel项目中使用React Router。
但是当我在React Router上创建路由器并尝试访问时，Laravel报告路由不存在错误。
如何使用React Router管理Laravel项目路由？
render((
<Router history={browserHistory}>
<Route path="/" component={App}/>
<Route path="/profile" component={Profile}/> // this route I
浏览 0提问于2016-11-21得票数 37
我正在构建一个React项目，该项目通过自定义钩子从API中检索数据，一旦数据被检索，它就会显示卡片，单击它们打开描述性页面。到现在为止一切都很好。
// App.js
<Routes>
<Route path="/" element={<Home />} /> // cards list
<Route path="/:eleId" element={<Details />} /> // description page
</Routes>
// Home.jsx with
浏览 1提问于2022-02-08得票数 2
回答已采纳
我正在尝试让 ("react-router"："^4.0.0-2")在我的项目中工作，并尝试基于实现它。然而，我无法让它与多个路由一起工作。我一直在想：
invariant.js:38 Uncaught Invariant Violation: MatchProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
我的代码如下
class Ro
浏览 8提问于2016-09-16得票数 4
回答已采纳
在我的网络项目中，我试图访问路由参数。
确定的路线：
<Route path="/meeting/:id">
<MeetingDetails />
</Route>
组件已加载，但我无法访问路由参数，因为未定义this.props.match。如何访问路由param id
import React from "react";
export default class MeetingDetails extends React.Component {
constructor(props) {
s
浏览 2提问于2021-01-07得票数 0
回答已采纳
1回答
我刚刚为React-Native创建了一个组件，我将很快将其作为一个包推送到npm。尽管我正面临着一个问题。
该组件依赖于另一个名为react-native-image-resizer的npm包。此程序包需要与rnpm链接才能工作。
但是，当我在一个全新的项目中安装组件时，依赖项不会自动链接，本机库也不会出现在项目中。当然，当我运行rnpm link时，它也不会将其添加到项目中。
因此，我想知道安装和链接此依赖项的最佳方式是什么？
MacBook-Pro:Example $ npm install react-native-image-crop
> react-native-image
浏览 0提问于2016-09-02得票数 10
2回答
我对这种反应很陌生。我已经读过了很多关于使用react路由器的教程。所以，我使用的方式是这样的
**index.js**
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
App.js
const store = configureStore()
class App extends React.Component {
render() {
return (
<Provide
浏览 0提问于2019-01-03得票数 0
回答已采纳
1回答
我正沿着这样的路线航行：
<Link to="/products#product5">Go to projects and focus id</Link>该链接的目标是转到页面并将焦点转到id。但这不会发生的。相反，我要登陆products页面，而不是专注于id。正确的处理方法是什么？它只需要从指定的链接。
这是我的尝试：Hello.tsx
import React from "react";
import { Link } from "react-router-dom";
export default ({ name:
浏览 2提问于2021-01-01得票数 0
回答已采纳
当我无法访问反应性路由器的历史道具时，我应该如何将用户重定向到不同的url？
我想做的是，当用户单击导航菜单上的注销链接时，用户将被重定向到根路径'/‘。
handleAuthentication(event) {
this.props.toggleAuthenticationStatus(() => {
// I want to redirect an user to the root path '/' in this callback function.
});
}
当用户单击导航菜单上的登录/注销链接时，将调用handleAu
浏览 1提问于2017-06-18得票数 0
我正在用侧边栏构建一个应用程序。最初，该侧边栏是静态的(没问题)，但现在我希望它能够使用Reactive路由器根据路由动态更新。
它非常类似于作为文档一部分提供的示例，因此我着手将侧栏示例修改到我现有的应用程序中。
下面是传递路由的路由器代码--一个组件：
import React from 'react';
import ReactRouter from "react-router";
import {Router} from 'react-router';
import {Route} from 'react-router';
浏览 0提问于2015-11-04得票数 0
回答已采纳
我在一个项目中使用react路由器，当我使用Link标记时，在新页面上读取它时，没有得到正确的this.props.params填充。
<Link to='/users/login/' params={{firstParam: 'firstParam'}} query={{firstParam: 'firstParam'}}>link</Link>
有人知道为什么会这样吗？
编辑:我也试过这样做
this.refs.linkToLogin.context.router.transitionTo('/users/lo
浏览 1提问于2015-10-01得票数 0
回答已采纳
1回答
我试图在我的react项目中使用redux，当使用来自“”的"connect()“方法时，我遇到了一个问题。
我创建了我需要的存储和减速器，但是当我试图连接我的组件时，没有任何显示，它给了我错误。
当我试图连接组件应用程序时：
import React from "react";
import PrivateRoute from "react-private-route";
import { connect } from "react-redux";
import { Router, Route, Switch } from "r
浏览 2提问于2019-04-15得票数 3
回答已采纳
我在项目中间更新了几个库(我记不清是哪个库了)，现在函数不工作了，它显示“尝试导入错误：'Switch‘is not exported from 'react-router-dom'”。当我尝试不带url的路由时，更改了，但组件不显示。我试着从'rect-router‘中盗取，太没用了。 以下是我的代码 import React from 'react';
import { render } from 'react-dom';
import './App.css';
import Navbar from "
浏览 13提问于2020-10-19得票数 1
回答已采纳
2回答
我试图创建一个受保护的路由，并创建了这样一个组件
import {useSelector} from "react-redux";
import {userSelect} from "../../Redux/userSlice";
import {Navigate} from "react-router-dom";
const ProtectedRoute = ({children}) => {
const currentUser = useSelector(userSelect);
if (currentUser.use
浏览 8提问于2022-04-24得票数 0
1回答
我已经在我的EXPO react原生项目中实现了npm install --save react-native-twilio和react-native-link。代码编译时没有错误。但是当我添加这行代码时：
const Twilio = require('react-native-twilio');
在我的文件中，它报告了一个错误，告诉我Module不能为空。
我想这是因为我没有正确链接我的twilio库到项目，但我不知道如何修复它，有人能给我一些帮助吗？
浏览 5提问于2018-02-18得票数 0
回答已采纳
'tans‘的值在navigation.setOptions中没有正确地路由，我如何在下一个屏幕中在导航选项中路由'tans’值？
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<View style={{ ...styles.info, flexDirection: 'row' }}>
浏览 1提问于2020-11-26得票数 1
回答已采纳
1回答
我正在尝试让启动并运行，但是React并不是在react路由器中定义的，因为错误导致了失败。
Uncaught TypeError: Cannot read property 'createClass' of undefined
稍后我还会得到这个错误：
Uncaught Error: Load timeout for modules: jsx!testapp_unnormalized2,jsx!testapp
知道我在这里做错了什么吗？我只想让路由器工作，而不连接所有文件。
这个应用程序是这样的：
index.html
<!-- ... -->
<
浏览 0提问于2014-12-05得票数 1
回答已采纳
1回答
我有一个简单的问题，我是Next.JS的新手，我们有一个项目，我的web应用程序使用Next JS在BackEnd中管理路由
现在我的问题来了，我想在一个部分中使用React-Router-dom
例如，在我使用Laravel和React之前
在Laravel，我这样设置我的路线
Route::get('/reactPage/*' ...)
然后在react中使用Clien路由
但是我不知道如何用Next JS来处理这个问题
(更多细节=>例如，我希望用户在看到包含某些链接的页面后单击某个链接，如果用户单击该链接，react-router-dom将处理路由，并且不会向服
浏览 2提问于2018-05-01得票数 3
1回答
我正在尝试创建一个表单，当我单击一个按钮时，替换为另一个表单。我尝试使用“链接到”，但在点击按钮后，另一个表单出现在第一个表单中。如何更改我的代码来纠正这个问题？
我的App.js：
import React, { Component } from 'react';
import './App.css';
import Login from "./Login";
class App extends Component {
render() {
return (
<div className="App"
浏览 0提问于2017-12-24得票数 0
当我试图渲染"Home“组件时，它没有显示任何东西.路径是正确的，路由器导入也应该是好的。我遗漏了什么？它在我的另一个项目中有效，即使我复制和粘贴代码，它似乎也不起作用。
App.js：
import React from "react";
import Home from "./components/Home"
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
function App() {
return (
<Rout
浏览 10提问于2022-11-11得票数 0
描述
我正在尝试创建一个使用@react-navigation的expo本地应用程序。导航工作了，但是在我最近做了一些依赖项更新(注意不更新所需的依赖项)之后，我的导航中断了。当我在手机里运行世博客户的时候，我只需要
undefined is not an object (evaluating 'Object.keys(_routers.CommonActions)')
* [native code]:null in keys
- node_modules/@react-navigation/core/src/BaseNavigationContainer.tsx:240:35
浏览 6提问于2020-02-18得票数 1
回答已采纳
我正在学习使用react-router-dom React库的教程。
我遇到的问题是，无论在localhost:3000之后在地址栏中写哪个URL，导航头都会显示出来(因为ex localhost:3000/dflkjfhdlkfjhdf实际上会显示导航头，而不是说它是无效的URL)。
index.js：
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
App.js：
function Ap
浏览 3提问于2022-02-10得票数 1
回答已采纳
2回答
我在我的项目中使用react router，当我点击登录按钮时，它会renders App组件的内容，但会在same page上显示它们。我想在点击login时在new page上显示，请帮助我
import React, { Component } from 'react';
import * as service from '../services/service';
import '../App.css'
import '../index.css'
import App from'../App'
import
浏览 0提问于2018-04-19得票数 3
回答已采纳
我的中有组件react-native-modal-datetime-picker。它会引发以下错误：
'node_modules/react-native-modal-datetime-picker/src/DateTimePickerModal.android.js：@错误:捆绑失败:错误:无法在项目中找到项目中无法解析项目中的模块“@react本机-社区/日期时间选择器”。
react-native-modal-datetime-picker模块中似乎有对@react-native-community/datetimepicker模块的引用。我以前从未遇到过必须手动添加另一个依赖项
浏览 5提问于2020-01-17得票数 9
我使用create- React -app在react中创建了一个npm包。因为假设react和react-dom在宿主项目中，所以我在package.json中将它们分别列为peerDependencies和devDependencies。
我了解到，通过这种方式，这两个配置仍然捆绑在一起，为了防止这种情况，我必须将它们列在webpack配置的外部，我成功地做到了：
externals: {
react: {
commonjs: 'react',
commonjs2: 'react&#
浏览 25提问于2019-07-29得票数 7
回答已采纳
3回答
我开始学习反应，并试图在我的旧项目中实现它。问题如下。
有带行的App.js
import React from 'react';
import {BrowserRouter, Route} from 'react-router-dom';
import Bets from './components/bets/bets';
function App() {
return (
<BrowserRouter>
<Route exact path="/bets" component=
浏览 2提问于2020-04-25得票数 1
我想获得流星反应项目中的当前路径，我想创建登录页面externally..how，我可以这样做吗？这是我的源代码
client/main.jsx
import React from "react";
import {meteor} from "meteor/meteor";
import {render} from "react-dom";
import {
BrowserRouter as Router,
Route
} from "react-router-dom"
import "./main.c
浏览 0提问于2018-02-21得票数 3
回答已采纳
这样的错误发生在我的项目中。
WARNING in ./node_modules/react-router-config/esm/react-router-config.js 41:38-44
export 'Switch' (imported as 'Switch') was not found in 'react-router'
与此运行时错误一起
react_router__WEBPACK_IMPORTED_MODULE_2__.Router.computeRootMatch is not a function
package.json
浏览 6提问于2021-12-21得票数 0
我的github代码中有一个问题我不知道如何解决。我是一个新的redux和路由器v6.我在我的项目中使用类型记录，这造成了更多的混乱，有人能帮我解决这个问题吗？
我的问题是
只有在授权用户登录时才能访问管理仪表板。但这条路线正被公开访问。
这是我的app.tsx文件
import React from 'react';
import { BrowserRouter, Route, Routes} from 'react-router-dom';
import {Home, Signup, Signin} from './container/index&
浏览 4提问于2022-01-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
