React Router v5 -如何在位置改变时强制路由始终重新渲染？
React Router v5是一个用于构建单页面应用程序的React路由库。它允许我们在应用程序中定义不同的路由，并根据URL的变化来渲染相应的组件。
在React Router v5中，当路由的位置发生改变时，默认情况下，只有组件的props发生变化时才会重新渲染。如果我们希望在位置改变时强制路由始终重新渲染，可以使用<Route>组件的key属性来实现。
具体步骤如下：
- 在需要强制重新渲染的路由组件外层包裹一个父组件，例如
<div>或<React.Fragment>。 - 在父组件中定义一个状态变量，例如
key，并初始化为一个初始值。 - 在
<Route>组件中添加key属性，并将其值设置为状态变量key。 - 当需要强制重新渲染路由时，更新状态变量
key的值，React会认为key发生了变化，从而强制重新渲染路由。
以下是一个示例代码：
import React, { useState } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
const [key, setKey] = useState(0);
const forceRerender = () => {
setKey(prevKey => prevKey + 1);
};
return (
<Router>
<div>
<button onClick={forceRerender}>强制重新渲染</button>
<Route key={key} path="/example" component={ExampleComponent} />
</div>
</Router>
);
}
function ExampleComponent() {
return <div>这是一个示例组件</div>;
}
export default App;在上面的示例中，我们通过点击按钮来触发forceRerender函数，从而更新key的值，实现强制重新渲染路由。
需要注意的是，强制重新渲染路由可能会导致组件的状态丢失，因此在使用时需要谨慎考虑。另外，React Router v6中也提供了更简洁的API来实现类似的功能，可以根据实际情况选择使用。
相关·内容
我试图更好地理解为什么我的所有组件在Router v5中的路由更改时都会重新呈现。注意，这些组件只是重新呈现，而不是重新安装。当我在dev tools中打开react扩展并选择Highlight Updates复选框时，我可以看到所有组件在更改路由时都会被概述，甚至那些位于比路由匹配级别更高的组件：
<Router>
<MyHeader />
<ComponentWithRoutes />
</Router>
在这个简单的示例中，我希望更改路由不会重新呈现MyHeader组件，因为没有什么变化。不过，我仍然会看到开发工具的亮点。我认为这是
浏览 3提问于2018-06-05得票数 5
回答已采纳
我想我的react路由器出了点问题。如何防止react路由器重新呈现以前呈现的页面？
我有这样的路由器代码：
class App extends React.Component {
render() {
return (
<div>
<NavBar/>
{this.props.children}
</div>
);
}
}
ReactDOM.render(
(
<Router history={hashHistory}&
浏览 13提问于2017-02-14得票数 7
2回答
我是个反应新手。我试图设置路由器和渲染来改变页面，但是它给了我一些我无法理解的错误。
我在我的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
回答已采纳
我正在尝试用react和webpack来设置路由器，我已经将historyApiFallback: true，添加到webpack配置文件中，然后我只是尝试在没有路由器的情况下正确地在App.js上使用路由器，但是当我添加组件<Router>或任何与其相关的东西时，我没有得到任何渲染。
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link,
} from 'react-router-dom';
const Home = () => <div>
浏览 5提问于2022-02-14得票数 1
从今天开始，我在创建一个新的应用程序时就看到了这个错误。我知道没有什么改变的反应路由器的新版本，所以已经安装了较早的版本。
"react-router-dom": "^5.2.0"
不知道是怎么回事。
应用程序组件的代码
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './components/Header&#
浏览 5提问于2021-12-15得票数 1
我需要在两个路径之间进行路由，我安装了npm install react-router (RES-路由器: 6.2.1和router: 5.2.0)。
我在网页Error: useRoutes() may be used only in the context of a <Router> component.中说了一个错误，这最终意味着我没有用BrowserRouter扭曲我的index.js文件，但是我做了。
代码：index.js
import {BrowserRouter as Router} from "react-router-dom";
ReactD
浏览 46提问于2021-12-20得票数 4
回答已采纳
有一个关于react路由器的问题。
我有一个标题项目，我想要显示的所有路线。当然，我希望这是的一部分，这样用户就可以单击导航中的项目。
目前我的<Header />在我的<Router>之外，我猜这不能工作，因为我的路由器不知道重新渲染？
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
<div>
<Header />
<Router>
<Switch>
<
浏览 0提问于2017-10-18得票数 2
我正在尝试使用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
回答已采纳
1回答
我对react路由器有问题。 这是我的路由器： <Router>
<div>
<Route exact path="/dashboard" component={projetList} />
<Route path="/dashboard/:id" component={
(props) => <Editor documentID={props.match.params.id} />
} />
</div>
浏览 14提问于2019-04-27得票数 0
我正在尝试从‘react- useHistory -dom’导入路由器，但是，我得到这个错误:导入错误：'useHistory‘不是从'react-router-dom’导出的。
我也检查了其他答案，比如 this，但都没有用。我的package.json看起来像这样
我就是这样使用useHistory的，
import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router
浏览 81提问于2021-09-19得票数 4
尽管我使用的是路由而不是开关，但它仍然显示了相同的错误，但我使用npm react router命令安装了router。代码如下
import './App.css';
import Header from './Header';
import Home from './Home';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
function App() {
return (
> <Router>
&g
浏览 7提问于2022-11-27得票数 -1
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<h1>Welcome</h1>
<Header />
<Route path="/" component={Home} exact
浏览 2提问于2022-03-18得票数 1
2回答
误差
node_modules/@types/react-router-dom/index.d.ts:13:10 - error TS2305: Module '"react-router"' has no exported member 'match'.
node_modules/@types/react-router-dom/index.d.ts:19:5 - error TS2305: Module '"react-router"' has no exported member 'PromptProp
浏览 60提问于2021-12-13得票数 2
回答已采纳
我使用的v5的反应-路由器-多姆.
npm ls --depth=0 | grep 'react-router-dom'
├── @types/react-router-dom@5.3.2
├── react-router-dom@5.3.0
但是，我得到了一个错误，比如类型定义引用了v6。
Type '{ exact: true; path: string; component: FC<{}>; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps |
浏览 1提问于2021-12-02得票数 1
我要创建一个应用程序，利用反应-路由器-多姆。我目前正在尝试我们的外翻5.2.0。我试图孤立这个问题，并集中精力使路由工作，但尚未成功。我用npx创建反应应用程序制作了这个应用程序。
Package.json
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react&#
浏览 8提问于2022-05-12得票数 3
这里我有/products/mobile路由
单击filter后，我正在使用route.push -router-redux执行react
这里它看起来像react-router-redux触发位置改变的动作，但它不会重新渲染任何视图(页面保持不变，不会用新的参数调用组件重装)，它只是在浏览器中更新url。
我正在使用this.props.router.push(/products/mobile?manufacturer=Apple)进行路由转换。
浏览 0提问于2016-10-01得票数 0
2回答
我有一段时间没有使用react，我不得不将react路由器-dom升级到新版本，现在它不起作用了。我想我改变了我必须要升级的一切。尖叫上什么都没有--这是关于小路的东西吗？我试着用"/“，不管有没有精确。
import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
function App() {
return (
<Router>
<Routes>
<R
浏览 6提问于2022-01-01得票数 -1
回答已采纳
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
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
回答已采纳
我搞不懂为什么不起作用。我已经卸载了反应性路由器-dom包并重新安装了它，但是我总是有相同的错误。
我得到的错误：./src/App.js试图导入错误：‘开关’不是从‘router’.导出的。
这是我的密码。我希望有人能帮我一把，谢谢你。
import './App.css';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import NavBar from '../src/Components/UI/NavBar/NavBar';
impo
浏览 16提问于2021-12-07得票数 0
回答已采纳
1回答
我遇到了那些私密路线的麻烦，而且没有被重新引导。我想知道如何修复这段代码。
这是我的App.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch, Routes, Route, Swit } from 'react-router-dom';
import MasterLayout from '../src/layouts/admin/MasterLayout'
import {
浏览 4提问于2022-01-24得票数 1
回答已采纳
1回答
我试着做一个简单的反应路由器。但这根本不管用。如果我不包括<Routes>标记，那么页面是空的。在包含<Routes>标记之后，它也无法工作。请看一下。
import React from 'react';
import './App.css';
import Nav from './Nav';
import About from './About';
import Shop from './Shop';
import{ BrowserRouter as Router, Switch, Ro
浏览 7提问于2022-05-13得票数 1
回答已采纳
1回答
我正在尝试从我的app.js实现一个动态路由。我有两页。HomePage.js和ReportPageLayout.js.
当我试图从HomePage导航到ReportPage时，取消了status=。
当我在浏览器中刷新页面时，数据将被获取和呈现.。
这是我的app.js文件
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from '.
浏览 6提问于2022-04-15得票数 2
我在我的主组件中定义了一个路由器。我想渲染组件在这个主要组件通过反应路由器。每当任何一个路径被渲染，我想有主要的组件，也就是Navbar也被渲染在顶部。我该怎么引导他们？？
方法1：
import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter as Router, Route } fro
浏览 0提问于2018-07-17得票数 1
回答已采纳
我的应用程序无法编译，因为类型记录引发了以下错误：
Type '{ path: string; exact: true; render: () => Element; }' is not assignable to type 'IntrinsicAttributes
& IntrinsicClassAttributes<Component<RouteProps, any, any>> & Readonly<RouteProps> & Readonly<...>'.
Propert
浏览 7提问于2020-04-13得票数 6
正如我们在v5 of react-router-dom中所知道的，我们可以使用useHistory钩子来获取历史对象。但如果我们有SSR，并使我们的目标之一的createMemoryHistory和createBrowserHistory的方式。
useHistory会给我们什么实例？
浏览 0提问于2019-11-10得票数 1
2回答
错误:元素类型无效:需要一个字符串(用于内置组件)或一个类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
代码：
Index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
浏览 6提问于2022-02-27得票数 2
回答已采纳
我以前在我的站点中使用路由器的方法似乎不再有效。下面是正在使用的代码片段。
import './App.css';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import Main from "./main"
import Home from "./home"
function App() {
return (
<Router>
<div className="App"
浏览 17提问于2022-04-24得票数 6
我使用HOC(这里是Layout component )来包装我的自定义组件。布局组件包含页眉和侧边栏。单击链接时，它将呈现相应的组件。但我的问题是，对于每个路由，我的HOC都被呈现为路由目标组件被包装在这个HOC中。我怎么才能让我的HOC渲染只有一次。示例代码片段。 App.js <Router>
<Switch>
<PrivateRoute path="routeOne" component={RouteOne}/>
<PrivateRoute path="routeTwo" component={RouteTw
浏览 30提问于2020-06-21得票数 1
回答已采纳
2回答
我使用的是react-router v6，我必须使用历史实例。 我已经使用以下命令安装了它 yarn add history react-router-dom@next 使用历史实例的一种方法是使用从v5 - useHistory -dom导入的路由器钩子 这段代码在v5上运行得很好，但在v6上就不行了 import { useHistory } from "react-router-dom";
const history = useHistory();
const onRedirectCallback = (appState) => {
histo
浏览 47提问于2020-08-26得票数 1
回答已采纳
存在以下代码在使用react-router-dom 4.0.0时成功记录上下文，但在使用5.0.1时记录undefined的问题。 const { BrowserRouter, Route, Switch } = window.ReactRouterDOM;
const PropTypes = window.PropTypes;
class Main extends React.Component {
static contextTypes = {
router: PropTypes.object.isRequired,
}
render() {
conso
浏览 24提问于2019-08-29得票数 0
我正在开发一个服务器端渲染应用程序，并使用react-router的match({}, function callback(error, redirect, props){})。当没有路径匹配给定的URL时，我想让下一个中间件继续运行。现在，我没有收到任何错误(错误param是未定义的)，当没有匹配时，只有警告：Warning: [react-router] Location "/non-existing-route" did not match any routes。
如果没有匹配的话我怎么知道？
浏览 2提问于2016-07-23得票数 1
回答已采纳
我正在尝试使用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路由器之前，一切正常工作.)
据我所知，没有重复的反应：
这是我的Header.js
import React, { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import { Over } from "../../
浏览 10提问于2022-05-11得票数 2
回答已采纳
1回答
您好，我如何渲染实际上分离在不同组件上的路由，例如，我的仪表板有两个路由，其中有两个组件，而我的App.js拥有所有剩余的路由。而且，我在从仪表板内部重定向到/login时遇到了麻烦，因为它不能从仪表板内部重定向(我使用的是history.push("/login")) 更新： 我的代码看起来像dashboard.js组件 <Router>
....mycomponent
<switch>
<Route path="/cutomers"><CutomersComponent><Route>
<R
浏览 29提问于2021-08-11得票数 0
1回答
我有一个使用React路由器v5的React应用程序(尽管我认为这个问题适用于V4、5和6)。
下面是我想做的事情:在App.js中：
<Router>
<Route path='/main' component={Main}/>
<Route path='/admin' component={Admin}/>
</Router>
然后在Main.js，我还有另外两条路线：
const Main=()=> {
return (
<div className=
浏览 11提问于2022-08-10得票数 1
回答已采纳
2回答
我用的是react-router-dom v4.3.1。
例如:我有下面的URL http://localhost:3000/url1/url2/url3
我只需要替换URL中的最后一条路由：/url3→/mynewroute3
如何用历史来做
浏览 2提问于2018-11-12得票数 5
回答已采纳
我正在将现有的react应用程序从使用director迁移到使用react-router。虽然到目前为止我很喜欢它，但使用director维护历史记录而不重新渲染整个页面是很容易的，我不确定使用react-router是否可以做到这一点。
我想要做的是有一个视图，我们称它为Slides，还有另外两个嵌套视图组件，我们称它们为One和Two。
在路由器中，这些组件将映射到/slides、slides/one和slides/two。
Slides包含各种布局组件，如Header、Nav和Footer。这些基本上都是静态的。
现在，当在幻灯片之间导航时，将播放一个过渡动画。使用我之前的路由器，我能够
浏览 3提问于2016-08-08得票数 0
回答已采纳
我已经创建了名为"LoginForm“、"Navbar”、"Home“、"About”和"Contact“的文件，它们都有各自的基本组件。
当我尝试将它们全部渲染到我的应用程序中时，我希望登录屏幕首先出现。然后我将它设置到我点击“登录”的地方，它应该链接到我的主页，然后可以在那里访问和切换导航栏。
由于某种原因，我可以在单击“登录”时访问主页，但登录屏幕不会消失。
下面是我的代码，其中包含到每个页面的路由和指定确切路径的开关。
import React, { Component } from 'react';
import ReactDO
浏览 0提问于2020-03-28得票数 0
当我在导航栏组件上使用link时，它会改变url但不会改变组件，但在我重新加载时它会改变组件，当我把link放在主app.js中时，它会完美地路由
app.js
import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router ,Switch} from 'react-router-dom'
function App() {
浏览 1提问于2021-04-10得票数 0
1回答
我在导航到结帐页面时遇到了麻烦。每当我点击应用程序中的篮子图标时，我可以看到URL正在改变，但是页面没有变化，我总是必须刷新页面才能进行导航，我也不知道为什么。
这是我的App.js代码：
import React from "react";
import './App.css';
import Header from './Header';
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route}
from "react-rou
浏览 7提问于2022-11-08得票数 1
回答已采纳
2回答
如何滚动到顶部的路由更改与反应路由器dom v6？
我已经尝试过这个，，这是我的解决方案，当我使用react-router-dom v5时，当我使用react-router-domv5时，它会让我的页面滚动到路径改变的顶部。现在，我正在使用react-router-dom v6，但此解决方案不起作用。
我尝试过，但对我不起作用。
我尝试过使用preload属性来触发scrollTo(0,0)的，它对我也不起作用。
浏览 7提问于2021-12-02得票数 2
2回答
我使用这个jsx脚本在我的index.html文件中呈现应用程序组件。
'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require ('react-router').Router;
var Route = require ('react-router').Route;
var IndexRoute = require ('react-router').I
浏览 2提问于2017-05-17得票数 0
试图升级反应-路由器从2到4，并打破它，现在不能渲染我的应用程序。
获取各种错误(最近的错误是：<Route> elements are for router configuration only and should not be rendered)
我还犯了错误，我的./路由呈现得很好，但是当我刷新并表示Cannot GET /randomRoute时，所有其他路由都会崩溃。
我正在创建一个react应用程序，我的主要index.js文件(其中包括ReactDOM.render)也包括路由，如下所示：
import React from 'react';
imp
浏览 1提问于2017-07-04得票数 4
回答已采纳
我正在尝试建立一个个人简历网站，但当我在我的App.js路由中调用我的组件时，react路由器并没有呈现。当我在我的路由之上调用它时，组件呈现得很好，但我不希望它显示在我的所有页面上，我只希望它被呈现到主路由。我很感谢你的帮助。提前谢谢你。
Home.js
import React from 'react';
import '../../App.css';
import HeroSection from '../HeroSection';
function Home() {
return (
<div>
&l
浏览 3提问于2022-02-05得票数 0
回答已采纳
我有一个react页面，它根据当前路由呈现登录页面或navbar +容器组件。我不希望导航栏与登录页面可见。因此，我的应用程序的结构如下：
index.js
ReactDOM.render(<Main/>, document.getElementById('root'));
Main.js
<Router>
<Switch>
<Route path="/login" component={Login} />
<PrivateRoute path="/" component=
浏览 2提问于2019-01-04得票数 3
4回答
我希望每次路由改变时console.log('Refresh')都会运行(从Component1切换到Component2)。但只有在第一次渲染时才会触发。为什么？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRout
浏览 14提问于2019-09-18得票数 27
回答已采纳
我做了一些路线，但我的组件不呈现当我点击链接。我没有任何错误，组件，除了Navbar，根本不渲染。BrowswerHistory产生同样的结果。我使用的是react路由器3.0.0版本。我的路由器结构有什么问题？
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
const router = (
<Router history={hashHistory}>
<Route path="/" component={Navbar}>
浏览 2提问于2017-03-31得票数 2
回答已采纳
当我尝试从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
回答已采纳
我需要启动一个react应用程序，我需要预渲染和路由，所以我安装了react-snap和react-router。(使用react-router进行路由，并使用react-snap进行预渲染)。
使用'npm start‘在本地看起来一切正常，但是当我做了一个产品构建并为它提供服务时，路由链接使页面重定向到一个新的url，所以我看到的总是主页。
我的渲染看起来像这样：
render() {
return (
<Router>
<React.Fragment>
<MainNav/>
浏览 3提问于2018-11-11得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
