React中的路由
是指用于管理应用程序中不同页面之间导航的机制。它允许开发人员根据URL的变化动态地加载不同的组件，从而实现单页应用（SPA）的效果。
React中常用的路由库是React Router。React Router提供了一组组件，如Router、Route、Switch和Link，用于定义路由规则、匹配URL和渲染对应的组件。
React中的路由有以下特点和优势：
- 单页应用（SPA）：React路由可以实现单页应用的效果，通过动态加载组件，避免了每次页面跳转都重新加载整个页面的问题，提升了用户体验。
- 嵌套路由：React路由支持嵌套路由，可以根据页面结构的层次关系进行路由的嵌套和管理，使得应用的路由结构更加清晰和灵活。
- 动态路由：React路由支持动态路由，可以根据URL中的参数来动态加载对应的组件，实现更加灵活和可配置的路由规则。
- 路由传参：React路由支持在路由之间传递参数，可以通过URL参数、查询参数或者状态来传递数据，方便组件之间的通信和数据共享。
- 历史管理：React路由提供了历史管理的功能，可以通过浏览器的前进、后退按钮来切换路由，同时也可以通过编程方式进行路由的跳转和导航。
在腾讯云中，推荐使用的React路由相关产品是腾讯云的Serverless Framework。Serverless Framework是一个开发、部署和管理无服务器应用的工具，它提供了丰富的插件和功能，包括支持React路由的插件。使用Serverless Framework可以方便地在腾讯云上部署和管理React应用的路由功能。
更多关于腾讯云Serverless Framework的信息和产品介绍，可以参考以下链接：
请注意，以上答案仅供参考，具体的产品选择和使用需根据实际需求和情况进行评估和决策。
相关·内容
我看过几篇文章说您应该引用this.props.location来访问查询字符串参数。然而，无论我在哪里检查这个属性，位置总是“未定义的”。很明显我漏掉了什么。
这是我的装置..。
package.json
{
"name": "Lender.Services.Web",
"homepage": "/dataexchange/lender",
"version": "0.1.0",
"private": true,
"dependencies":
浏览 3提问于2018-06-19得票数 1
回答已采纳
这是我第一次使用React JS，我坚持这个错误，
我正在尝试从这个上学习react路由器，它也看过多次，但我仍然找不到并解决不了这个问题：
package.json
{
"name": "cobareact",
"version": "1.0.0",
"description": "app pertama react",
"main": "index.js",
"scripts": {
浏览 10提问于2017-05-23得票数 3
回答已采纳
通过我对React路由器所做的研究，似乎每个在线的示例都会将Reactive路由器代码存储在App.js文件中。
如果您想要使用路由器进行侧栏、页眉或页脚中的链接呢？
具体来说，这就是我正在学习的实现React路由器的例子：
期望的结果:使用组件attribute链接到站点地图页面的路由。
App.js
import React from 'react';
import Header from './components/Header';
import Hero from './components/Hero';
import Main fro
浏览 2提问于2020-03-10得票数 0
1回答
我正在使用React创建一个Node包。对于组件，我必须使用react路由器。是否可以在组件中使用react路由器，因为我还没有在任何其他公共组件中见过react路由器。
如果不可能，我如何在组件中建立路由机制。我是否需要将其分解为单独的独立组件，它将处理通过主项目的路由。
请帮我找出解决这个问题的方法.
浏览 1提问于2018-03-26得票数 0
2回答
我尝试使用React路由器中的Link在新选项卡中打开一个组件，它打开了一个404 not found而不是react组件。
React入口点js，
import React from 'react';
import { render } from 'react-dom';
import { Route,Router, browserHistory} from 'react-router';
import Home from './components/Home';
import About from './compone
浏览 0提问于2016-08-19得票数 0
3回答
我尝试使用react路由器-dom 4.0.0库。但是它给我带来了这个错误
未定义TypeError:无法读取未定义属性的“位置”
在browserHistore中似乎存在这个问题。在我使用react之前-路由器2.x.x和一切都很好。这是我的index.js
import 'babel-polyfill'
import React from 'react'
import { Router, hashHistory } from 'react-router-dom'
import { render } from 'react-do
浏览 7提问于2017-04-01得票数 12
回答已采纳
我对React生态系统很陌生，通过尝试简单的应用程序来学习。在这种情况下，我将尝试路由如何在react应用程序中工作。基本上，我们的想法是：
点击链接(一个反应路由器组件)导航到一个新页面。
成功完成分派的异步操作后，导航到新页面。
这是我的密码
import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-re
浏览 4提问于2016-06-01得票数 9
1回答
我有我的基本反应路由器设置如下
components.js ->处理组件
main.js -> ->通过路由呈现组件
index.ejs -> React/React通过CDN加载的路由器依赖项
build.js -> (浏览器化main.js)包含为<script>
当我启动我的节点快速服务器&在浏览器中打开localhost:4444时，我会得到以下警告和错误
react.js:20478警告: React.createElement: type不应为空、未定义、布尔或数字。它应该是一个字符串(用于DOM元素)或一
浏览 3提问于2016-10-22得票数 0
回答已采纳
1回答
在开发模式中，react和express完美地连接在一起，我能够从后端获取数据。但是，当在生产模式下使用它们时，我得到的状态是200，但无法从express获得json响应。
我得到了这个错误：
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
后端文件是：
const express = require('express');
const bodyParser = require("body-parser");
const cors = requi
浏览 19提问于2020-11-16得票数 0
1回答
在这里，我试图在我的反应应用中实现路由概念。但我面对的问题和问题是，URL链接在浏览器的url部分发生变化，而页面内容却没有变化。但是当我刷新链接时，就会呈现新的内容。
App.js
import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Dashboard1 from './Dashboard1';
import Dashboard2 from './Dashboard2';
functio
浏览 6提问于2022-05-04得票数 0
在切换路由路由时间，它正在工作，但现在是最新的新路由，路由它不能工作的自定义路由--我已经在HomeLayoutHOC中包装了导航栏页面和主页--任何人都可以帮助我:)如何完成我尝试过的这个最新版本，但是有很多事情要做。没有结果
我想要'HomeLayoutHOC‘路线而不是’路由‘
->client\src\App.JSX :
//HOC
import HomeLayoutHOC from "./HOC/Home.Hoc";
import { Route, Routes } from "react-router-dom";
//Comp
浏览 1提问于2022-08-26得票数 1
回答已采纳
我正在使用react路由器5.5.1版本，并试图在我的index.js文件中使用它：
./src/index.js
14:8-21 'react-router' does not contain an export named 'BrowserRouter'
我的index.js中的导入语句
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';
浏览 7提问于2018-04-12得票数 9
回答已采纳
我们正在用dotnet编写一个带有Razor视图(纯后端堆栈)的项目。我们的计划是将每个视图移动到React，使用react-router-dom来处理客户机和服务器中的路由。
我们的想法是一页一页地移动，不要做大爆炸，因为这个项目已经在生产中了。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
const history: History = createBrowserHistory({ basen
浏览 0提问于2019-08-08得票数 5
回答已采纳
0回答
我只有一个页面是React，网站的其余部分(目前)是Rails。
React页面只有一条路由，不需要任何进一步的路由。
我希望将路由请求发送回Rails服务器，而不是让React拾取它们。目前，您可以按预期使用Rails页面，直到您进入React页面为止，此时您不能退出React页面，无论URL如何。
生成React页后，生成内容将移动到Rails应用程序中的公用文件夹中。我使用控制器操作通过呈现公共文件夹中的索引页来调用React页。
Controller
def react_index_html
render file: 'public/index.html'
浏览 3提问于2018-07-17得票数 0
回答已采纳
1回答
我将与一起使用，并且我无法理解为什么在生产中会出现此错误，但在本地对接环境中却不会：
react-dom.production.min.js:3282
TypeError: Cannot read property 'filter' of undefined
at l (fieldFactory.js:21)
at p (List.js:83)
at beginWork (react-dom.production.min.js:2902)
at o (react-dom.production.min.js:4051)
at a
浏览 1提问于2019-02-21得票数 1
回答已采纳
在React-路由器中，我看到它已经从react-router-dom导入了Route和Router模块。我想知道这两个模块有什么不同？
浏览 2提问于2017-05-13得票数 7
我正在尝试使用react路由器和node js服务器来管理react应用程序。
我在react中的路由器：
<BrowserRouter>
<Switch>
<PrivateRoute token={token} Component={Payments} exact path="/payments"/>
<PrivateRoute token={token} Component={User} exact path="/user"/>
浏览 0提问于2018-09-14得票数 6
1回答
我有一个反应路由器3的设置，很好地工作在嵌套组件。现在，当我试图在react路由器V4中做同样的事情时，我似乎无法让它工作。我读过几篇文章，包括一些文档，但仍然无法让它起作用。我首先在react路由器3中发布我的设置，然后我尝试了什么-路由器4。
React路由器3安装App.js
import { Router, browserHistory } from 'react-router';
import Store from './store';
import routes from './routes';
ReactDOM.render(
浏览 3提问于2017-06-26得票数 1
回答已采纳
我试图弄清楚为什么下面的页面在手动刷新后会出现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
我不知所措。react-router-dom不适合我。当更改url中的地址时，应用程序不会重新绘制。有一段时间，我在互联网上寻找这个错误，并确保一切都适合我。此外，在我的最后一个项目中，所有的东西都有相同的路由设置。
我说的是什么。我有两条路线：
<Route path="/" component={MainPage} />
<Route path="/add" component={AddAdvertisementPage} />
默认情况下，我的MainPage组件是加载的，当我在搜索栏中写入http://localhost:30
浏览 3提问于2021-12-23得票数 1
回答已采纳
我一直在ReactJS中从学习路由。我还有一些问题来自本教程中给出的代码。
1-在此代码的App组件中，有一个名为“子”{this.props.children}的支柱值。但问题是，这个道具值是从哪里传递给这个App组件的？
2-在main.js文件中有browserHistory使用的<Router history = {browserHistory}>。问题是，为什么在那里使用/写？
组件：
import React from 'react';
import ReactDOM from 'react-dom';
import { Router,
浏览 1提问于2017-09-24得票数 0
我刚刚开始学习React，我想先创建一些导航条，为未登录的用户提供链接，然后再为日志用户创建链接，但我很难做到这一点。我的代码：
问题是，当我用路由器(来自外部routes.js)包装导航栏时，它根本不显示，但是如果我自己在url中输入/login或/signup，则路由工作得很好。另一方面，如果我注释掉路由器，就会显示navbar，但是路由不能工作。我读过关于LinkContainer的文章，但没有多大帮助。我假设因为navbar是用路由器包装的，所以它会被显示出来，并且链接会正常工作。我不想在App.js中有路由器，但是为了便于阅读，我想把路由器放在单独的文件中。我的package.jso
浏览 1提问于2019-08-04得票数 0
回答已采纳
安装最新版本的v6获得此错误后：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
该代码在较低版本中运行良好，但对于version6则失败。
代码: index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from
浏览 0提问于2021-11-12得票数 2
1回答
我正在使用react-router-dom版本6.4.0启动react项目，但无法为所有路由创建通用的标头。
App.js --这是我要添加RouterProvider的文件
import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";
function App() {
r
浏览 18提问于2022-09-21得票数 4
回答已采纳
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
1回答
我正在使用"@reach/router": "^1.2.1"，并且在我的App.js文件中，我有一个后备组件可以在我的路由加载时显示出来： <React.Suspense fallback={<MainLandingPageLoadingScreen />}>
<Router>
<MainLandingPage path="/" />
<AnotherLandingPage path="/coolbeans" />
<NotFound
浏览 14提问于2019-05-29得票数 3
我遵循了一个关于路由和它是如何在react中工作的react教程。我不知道为什么这段代码不能正常工作。如果我理解正确，它应该呈现我指定的组件。任何帮助都会很感激ps:这正是我所遵循的教程中使用的代码，并且在此过程中运行良好。
App.js代码
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
Link
} from "react-router-dom";
imp
浏览 2提问于2022-03-13得票数 0
回答已采纳
2回答
根据我的问题，我正在尝试重构我们应用程序中的路由，以使其更加嵌套。
麻烦的是，似乎不可能从数据递归地呈现一个路由元素，因为react路由器坚持认为路由直接在路由内部，而不是封装在另一个组件中，而且我无法看到如何递归地呈现(任意深度的)任何其他方式。
复制.
import React from "react";
import { BrowserRouter, Routes, Route} from "react-router-dom";
import "./styles.css";
function GenericPage() {
retu
浏览 8提问于2022-06-08得票数 5
回答已采纳
我正在尝试使用react- router -dom进行路由，但是我的URL正在更新，但是页面没有路由到我指定的组件。这是我的App.js
import "./App.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Menu from "./layouts/Menu";
import Dashboard from "./layouts/Dashboard";
import Content from "./layouts
浏览 1提问于2021-03-29得票数 1
我正在尝试使用React路由器和路由，但是不断地得到这个错误：
我尝试了以下几点：
删除和重新安装react-router.deleting --路由器-dom和node_modules文件夹，并运行npm安装以确保react路由器和react-dom是相同的版本是的，我在上面列出的每一次尝试之后都重新启动了服务器。
以下是我的index.js代码：
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App fr
浏览 6提问于2021-06-08得票数 8
回答已采纳
App.js
import React, {Component} from 'react';
import './App.css';
import About from './about';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div cl
浏览 5提问于2022-02-26得票数 2
回答已采纳
1回答
我正在使用Laravel和React JS创建一个web应用程序。我已经编写了多个JSX组件来加载页面。所有组件都正确安装，没有任何错误，但这里的问题是一些标题标签和一些表单内容没有显示在页面上，而且页面中缺少大多数文本和其他内容。即使这些是在组件上渲染的，我也可以使用浏览器控制台和react开发工具来检查它们。但是它没有显示在页面上。我尝试了很多方法来解决这个问题，但最终，我以失败告终。任何关于解决这个问题的帮助都将是可贵的。 下面是我的代码： HomeBanner.jsx import React, { Component } from 'react';
import R
浏览 37提问于2019-03-11得票数 1
回答已采纳
我找不到任何教程来说明如何将React Router添加到现有的create-react-app中。所有这些都展示了当你启动一个全新的create react应用时如何做到这一点。如何将其添加到我正在开发的半成品create-react-app中？
浏览 1提问于2017-07-11得票数 0
我有Quotes组件，它包含引号列表。当我单击单个列表元素时，reason路由器动态地更改url并在完整的页面(即Full_Screen_Quotes )中打开它，然后再次在Full_Screen_Quotes中添加Comments部分，在reason路由器的帮助下单击按钮上的Comments部分，但由于不知道的原因，它无法工作。可能是什么原因？
import { useParams } from "react-router-dom/cjs/react-router-dom.min"
import Comments from "./Comments"
impor
浏览 18提问于2022-01-17得票数 1
1回答
我的问题和标题一样。我使用react v16和react-router v4导航到两个页面，然后单击browser back按钮。我需要最后一次访问页面，而不是我导航的最后一条路线。在我之前的react项目(react v15，react-router v3)中，它运行得非常好。这是我的源代码，请告诉我我的错误。谢谢。
index.js
import { HashRouter as Router } from 'react-router-dom';
import routes from 'routes/index';
render(
<Provider
浏览 0提问于2018-02-21得票数 4
回答已采纳
我是新的反应，并正在学习如何正确地使用反应路由器与反应所有的一起。如您所知，React路由器被分为三个包:react路由器、react路由器-dom和react路由器-原生包。因此，在默认情况下，反应路由器和反应路由器都有反应路由器.问题是，反应路由器和本机反应路由器都包括反应路由器，那么为什么要将反应路由器作为单独的包呢？
浏览 5提问于2019-10-27得票数 2
回答已采纳
4回答
我试图设置路由，但由于某种原因，它返回一个空白页，而不呈现任何内容。
我使用的是路由器版本6.3.0
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMo
浏览 13提问于2022-04-02得票数 0
回答已采纳
有人知道如何在react路由器4中做嵌套路由吗？我想这样设置路由：
import React from 'react';
import { Route, Switch } from 'react-router';
import Containers from './containers/index';
import Components from './components/index';
export default (
<Switch>
<Route path='/users&
浏览 5提问于2017-03-31得票数 0
1回答
以下是四个组成部分：
App.js：
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return <Switch>
<Route path="/about">
<About />
&l
浏览 0提问于2021-10-31得票数 4
回答已采纳
16回答
在npm start之后，浏览器提供错误：
编译失败。/src/components/App/App.js模块未找到:无法解析“react router”。
react路由器-dom被添加到npm中的依赖项中，react路由器和react也是如此.
项目已使用create-react-app myapp cmd行创建。这是在本地主机节点服务器上运行的。我在我的项目文件夹中有一个api和app文件夹。我尝试过各种各样的东西。在应用程序文件夹中手动更新我的package.json，重新安装react路由器-dom，删除应用程序文件夹中的package-lock.json并重新初始化它。我的
浏览 0提问于2018-12-24得票数 93
2回答
React路由器导航
、、、、
在这里学习React，并尝试让路由正常工作。这是一件非常简单的事情，只是为了了解语法等。当我在地址栏中输入路由1和2时，下面的代码可以工作。但我想建一个导航栏。假设我可以简单地在App.js中添加超文本标记语言来实现这一点，我意识到使用<a href=并不是使用链接的方法。这与我的路由中的<Link>标签工作得很好，但是假设我想在App.js中添加一个导航，使用相同的链接方法是不起作用的。
我尝试添加：
<h1>
<Link to="/route-one">One</Link>
|
浏览 3提问于2016-01-07得票数 0
2回答
当我在浏览器中输入localhost:8080时，它会显示App.js组件。但是，当我导航到localhost:8080/#/hello时，它会显示相同的App.js组件而不是hello.js。本地主机:8080/hello显示“无法获得本地主机:8080/hello”。我的代码有什么问题？我在应用程序中使用webpack和babel。
//index.js
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { Provider } from '
浏览 1提问于2018-08-15得票数 2
回答已采纳
1回答
我想捕捉404页，当用户输入un Uri没有在应用程序中定义。 我有一个Home路由/。在它里面，我有子路由。然后我在顶层有其他路由(与Home相同的级别。 我的问题是子路由/children1 /children2 当我输入/strangeRoute时，react加载的是/的内容，然后是404页面。 这是因为我没有在Home路由中应用exact。我不应该添加它，因为我应该显示Home内容+ Children1/Children2内容，而不是一个或子路由。 我看到的唯一解决方案是存储所有路由，然后每个页面请求(使用受保护的路由)检查记录的路由是否与现有路由对应，如果不是，则将其重定向到404
浏览 13提问于2020-11-21得票数 0
下面是我的代码。app.js是根文件，about.js是一个只显示一些文本的文件，index.js使用react路由器处理所有路由。我想在app.js中呈现我的app.js。如果我不在this.props.children中写“app.js”，它就不会呈现。
App.js --呈现其中所有子组件的根文件。
"use strict";
import React from 'react';
import { Link } from 'react-router';
class App extends React.Component {
rend
浏览 4提问于2016-01-19得票数 16
回答已采纳
我正在尝试学习react router 4，但遇到了一些问题。我从这里开始遵循的指南，是的，这个例子在我的浏览器中运行得很好。我可以单击链接并在浏览器中显示内容。
但是，如果我在浏览器中键入url而不是单击链接，页面将显示未找到。
发生什么事了呢？React-router只能使用链接而不能输入URL吗？？
浏览 5提问于2017-07-08得票数 0
我是在react中编程，事实上，这是我第一次在React中编程。在App.js中，我定义了路由，我使用了react路由器-dom库，但是我得到了标题的错误，代码如下，我做错了什么，你能向我解释一下吗，因为我带了所有的组件。
import React from 'react';
import './App.css';
import 'materialize-css/dist/css/materialize.css';
import NavBar from './components/NavBar';
import ItemListC
浏览 10提问于2022-07-07得票数 -1
我正试着用react-router和typescript在我的网站上做一个导航。但是它不起作用，我得到的不是主页，而是一个空页面
这是我的app.tsx文件
// app.tsx
import * as React from 'react';
import '../App.css';
class App extends React.Component<any,any> {
public render() {
return (
<div>
{this.props.children}
浏览 2提问于2018-05-21得票数 0
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</Re
浏览 13提问于2022-02-25得票数 2
回答已采纳
1回答
在React模块库(项目间共享的库)中的一个组件中，我需要提醒用户注意未保存的更改，这意味着必须在组件卸载之前通知用户。
我已经做了很多研究，唯一可能的方法是使用路由器(使用< Prompt />或setRouteLeaveHook，因为SPA不卸载页面以在页面之间导航)。
由于npm模块并不真正拥有<路由器/>组件(使用这些模块的React项目拥有它)，任何与路由器相关的操作似乎都会产生错误，如下所示：
Error: Invariant failed: You should not use "anything-router-related" outsi
浏览 5提问于2020-11-18得票数 0
2回答
我想像往常一样在app.js文件上呈现我的login.js组件，但是今天我面临着一个问题，比如react-router中的一个组件重叠到另一个中，尽管它们在我的react.js项目中都是一个单独的组件。我其实不明白为何会突然出现这个问题。 这是我的组件，我将在react-router内的App.js文件中呈现它。 import React from "react";
import "./Login.css";
const Login = () => {
return (
<div className="
浏览 35提问于2020-11-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
