在 React 单页应用中，常常使用 react-router4 来进行路由跳转。然而，当使用 react-router4 进行路由跳转时，有时会遇到页面无法重新渲染的问题。本文将介绍如何解决这一问题。
问题描述
在使用 react-router4 进行路由跳转时，如果我们在同一个路由中跳转到不同的路径，页面并不会重新渲染，而是保留原有的状态和数据。这意味着，如果我们想要在新的路径中展示新的数据，我们必须手动清除原有的状态和数据。这不仅不符合我们的期望，还会增加我们的开发难度和代码复杂度。
问题分析
在使用 react-router4 进行路由跳转时，页面并不会重新渲染的原因是，react-router4 的路由匹配规则是基于路径的。当我们在同一路径下进行跳转时，react-router4 并不会重新挂载组件，而是只会更新组件的 props。这就导致了原有的状态和数据并没有被清除。这种行为在某些情况下是非常有用的，比如在处理列表数据时，我们希望可以在同一路径下进行分页和排序。但在其他情况下，这种行为就不符合我们的期望了。
解决方法
要解决这一问题，我们可以通过给路由添加 key 属性来强制 react-router4 重新挂载组件。key 是 react 中的一个很重要的属性，用于标识每个元素。当 key 改变时，react 认为这个元素已经被替换，需要重新挂载组件。所以，我们可以通过改变路由的 key 来让 react-router4 重新挂载组件。
以下是如何为路由添加 key 属性的示例代码：
import { Route } from 'react-router-dom';
<Route path="/path/to/component" key={Math.random()} component={Component} />在这个示例代码中，我们为 Route 组件添加了一个 key 属性，并将其值设为 Math.random()。每次路由跳转时，key 的值都会发生变化，这就会强制 react-router4 重新挂载组件。
总结
在本文中，我们介绍了在使用 react-router4 进行路由跳转时页面无法重新渲染的问题。我们分析了这一问题的原因，并提出了解决方法：为路由添加 key 属性来强制 react-router4 重新挂载组件。这种方法非常简单，但却可以有效地解决问题。我希望本文可以帮助大家更好地理解 react-router4 的路由匹配规则，并在实际开发中帮助大家避免这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4c90748841e989412b1bc