背景
Single Page Application （SPA）是一种通过 AJAX 和动态 HTML 更新技术创建的启发式 Web 应用程序。与传统的多页面应用程序（MPA）不同，SPA 的所有内容都加载在单个 HTML 页面中，通过 JavaScript 实现内容的动态更新而无需页面的完全刷新。这种应用程序类型的 Web 应用程序允许用户更快地浏览网站，并提高了对其的参与度。
React.js 是一个广泛使用的 JavaScript 库，用于构建大型、复杂的用户界面。React.js 本身是 SPA 的一种实现方式。但是，当用户在 React.js SPA 页面上点击某个链接并跳转到另一个页面时，页面的 URL 不会发生变化。这可能导致以下问题：
- 网站分析工具无法正常跟踪页面浏览量、着陆页数据、访问来源等关键指标。
- 当用户将页面链接复制并粘贴到其他位置时，其他用户无法使用该链接访问相应页面。
解决方案
React.js 提供了 react-router-dom 用于处理 URL 和页面路由管理。使用 react-router-dom ，可以创造性地将原本在 SPA 应用中非常复杂的 URL 变化工作变得简单。React Router 为应用程序提供一个路由系统，用于管理 URL 和响应用户导航。
以下是解决该问题的步骤：
第一步：安装 react-router-dom
在终端中运行以下命令：
npm install react-router-dom
第二步：创建 BrowserRouter
在应用程序的根组件中创建 BrowserRouter 。
-- -------------------- ---- -------
------ - -------------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
----- --- ------- --------------- -
-------- -
------ -
---------------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
---------
----------------
--
-
-第三步：添加 Link 组件
在应用程序中使用 Link 组件或 NavLink 组件来创建页面链接。这些组件避免了浏览器刷新页面，并更新浏览器的 URL 。
-- -------------------- ---- -------
------ - ---- - ---- -------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
--
-
-第四步：添加 Redirect 组件
Redirect 组件用于在 URL 发生更改时将用户重定向到新地址。例如，我们可以在用户尝试访问不存在的页面时将其重定向到主页。
-- -------------------- ---- -------
------ - -------- - ---- -------------------
----- -------- ------- --------------- -
-------- -
------ -
-----
------- ----------
--------- ------ --
------
--
-
-总结
使用 React.js 构建 SPA 应用程序时，URL 变化是一个需要注意的问题。通过使用 react-router-dom ，我们可以避免在页面跳转时出现 URL 变化的问题。react-router-dom 提供了一组实用的组件，使我们可以相对容易地管理 SPA 应用程序的页面路由。
示例代码：
app.jsx
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
------ ------- ---- ------------
------ --- ---- --------
------ -------- ---- -------------
----- --- ------- --------------- -
-------- -
------ -
---------------
-----
---- --
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ --------------- ------------------- --
------ -------- -------------------- --
---------
------
----------------
--
-
-
------ ------- ----home.jsx
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- ------- --------------- -
-------- -
------ -
-----
-------- ---------
---------- -- --- ---- ---------
------
--
-
-
------ ------- -----about.jsx
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- ------- --------------- -
-------- -
------ -
-----
--------- ---------
---------- -- --- ----- ---------
------
--
-
-
------ ------- ------contact.jsx
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
-------- -
------ -
-----
----------- ---------
--------- ------- -- -- ------------------------
------
--
-
-
------ ------- --------nav.jsx
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
----- --- ------- --------------- -
-------- -
------ -
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
--
-
-
------ ------- ----notFound.jsx
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------------
----- -------- ------- --------------- -
-------- -
------ -
-----
------- ----------
--------- ------ --
------
--
-
-
------ ------- ---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6499768248841e989467f5fd