什么是 SPA 应用？
单页面应用（SPA）是一种以 Web 应用方式呈现和交互的网页应用程序，其页面不需要重新加载或跳转。SPA 应用只在用户进入应用时加载必要的 HTML、CSS 和 JavaScript，之后所有的操作都在当前页面内完成。
相对于多页面应用（MPA），SPA 应用带来更好的性能、用户体验以及可维护性。
React Router
React Router 是 React 的一个第三方库，用于实现 SPA 应用中的路由功能。借助 React Router，我们可以在单页面中实现多个页面的效果，而无需经历每个页面的重新加载。
使用 React Router，我们可以通过定义路由来映射特定 URL 到特定的 React 组件。当用户点击路由链接，React Router 会根据定义的路由信息来决定要将哪个组件渲染到页面中。
但是在使用 React Router 实现 SPA 应用时，有时候会出现路由跳转后页面不刷新的情况。这种情况下，页面仍然展示的是上一个路由对应的组件，而不是当前路由对应的组件。
解决路由跳转后页面不刷新的问题
在 React Router 中，当使用 Link 或 NavLink 组件跳转路由时，React Router 默认是使用浏览器的 History API 来实现跳转的，而不是重新加载整个页面。这样可以提升性能，提高用户体验。
但是，如果我们需要让页面在切换路由时重新渲染，我们可以使用两种方法来解决这个问题：
1. 通过设置 key 属性来强制重新渲染组件
当 React 组件的 key 属性发生变化时，React 会判断该组件需要重新渲染。我们可以通过设置 key 属性来实现在路由跳转时重新渲染组件的效果。
例如，我们有一个组件 Counter，用于计数，通过该组件的 key 属性来实现路由跳转时重新渲染的效果：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
-------- -------------- -
----- ------- --------- - -----------
------ -
-----
----------------
------- ----------- -- -------------- - ---------------
------
-
-
-------- ----- -
----- ------------- --------------- - --------------
------ -
-----
------- ----------- -- ------------------------------
-- - -----
---------
------------ -- -------- ------------- ---
------
-
-在上面的示例中，我们定义了一个 App 组件，用于显示一个按钮和一个计数器。当点击按钮时，我们会将 showCounter 值取反，从而控制计数器的显示与隐藏。而在计数器组件中，我们通过设置 key 属性为 "counter" 来实现路由跳转时重新渲染组件的效果。
2. 使用 withRouter 高阶组件封装路由组件
使用 withRouter 高阶组件可以将路由信息作为组件的 props 传递给被包裹的组件。通过使用该组件，我们可以在组件中访问到路由信息，然后根据路由信息来更新组件的状态，从而实现路由跳转后重新渲染组件的效果。
例如，我们有一个组件 User，用于显示用户信息，通过该组件的 withRouter 高阶组件来实现路由跳转时重新渲染组件的效果：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
------ - ---------- - ---- ------------------
-------- ----------- -
----- ------ -------- - ------------
------------ -- -
-- ------------
----- - ----- - - -----
----- ------ - -------------------
----- ---- - - --- ------- ----- ------------- -
-------------
-- --------
------ -
-----
-------------
---------------------
----------------------
------
-
-
------ ------- ----------------在上面的示例中，我们定义了一个 User 组件，用于显示用户信息。通过使用 withRouter 高阶组件来获取路由信息，从而实现路由跳转后重新渲染组件的效果。
总结
React Router 是 React 的一个第三方库，它可以让我们在单页面中实现多个页面的效果。但在 React Router 中，如果不采取措施，有时路由跳转后页面不会刷新。为了解决这个问题，我们可以通过设置 key 属性或使用 withRouter 高阶组件来强制重新渲染组件，实现页面切换时的重新加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0173d48841e9894c731b1