React Router 是 React 应用中最受欢迎的路由库之一。React Router V4 是目前最新的版本，带来了一些重大变化。相较以前，React Router V4 在 API 以及用法上均有所不同，更加灵活高效。
在本文中，我们将学习 React Router V4 的 API、用法、示例及其详细解释。如果你是 React Router V4 的新手并且希望快速入门，则本文将为你提供全面的指导。
安装
在安装 React Router V4 之前，你需要先安装 React。你可以在终端中执行以下命令从 npm 安装 React：
$ npm install react
对于 React Router V4，则需要执行以下命令：
$ npm install react-router-dom
安装完使用 npm 安装 React Router V4 后，就可以开始学习它的 API 以及用法了。
路由
路由是 React 应用中用来控制导航的重要工具。在 React Router V4 中，路由 API 是通过 <Router> 组件来实现的。Router 组件将根据 URL 路径匹配渲染相应组件。
定义路由
在 React Router V4 中，路由的定义是通过 <Route> 组件来实现的。我们可以通过在 Route 组件中设置 path 和 component 属性来定义路由。例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ - ---- - ---- ---------
------ - ----- - ---- ----------
----- --- - -- -- -
-----
------ ----- -------- ------------------
------ ------------- -------------------
------
--
------ ------- ----在上面的示例中，我们第一个定义了 Home 组件，并将其与 path 为 '/' 的 Route 组件进行绑定，这意味着当 URL 的路径为 '/' 时，React 会将 Home 组件渲染到页面上。同样地，我们定义了 About 组件，并将其与 path 为 '/about' 的 Route 组件进行绑定，这意味着，当 URL 的路径为 '/about' 时，React 会将 About 组件渲染到页面上。
需要注意的是，Router 组件只会匹配一次。也就是说，只有第一个匹配到的 Route 组件将会被渲染。因此，我们需要确保将与特定 URL 路径匹配的 Route 组件放在路由中的顶部。
关于 Route 组件的一些属性：
- path：Route 组件将匹配的路径。可以是字符串或正则表达式。
- component：用来渲染的组件，在这种情况下，React 将会使用该组件来渲染页面。
- exact：一个布尔值变量，表示匹配路由时是否考虑完全相等。如果设置为 true，则仅匹配完全相等的路径。
- strict：一个布尔值变量，表示是否考虑 URL 尾部的斜杠。如果设置为 true，则要求带有斜杠的路径与定义路由时的路径完全相等。
嵌套路由
在 React Router V4 中，我们可以轻松地实现嵌套路由。由于 Route 组件是在 Router 组件之内定义的，所以我们可以在其中定义子路由。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ---- - ---- -------------------
------ - ---- - ---- ---------
------ - ------- - ---- ------------
----- --- - -- -- -
-----
----- ----------------------
----- ----------------------------
------ ------------ ---------------- --
------ --------------- ------------------- --
------
--
------ ------- ----在上面的示例中，我们定义了两个 Link 组件，用于将我们导航到不同的路由。我们还定义了两个 Route 组件，其中 Team 组件和 Players 组件都是顶层组件。这一次，当我们点击 Team 链接时，React 会将 Team 组件渲染到页面上。类似地，当我们点击 Players 链接时，React 会将 Players 组件渲染到页面上。
动态路由
React Router V4 支持动态路由，这意味着你可以在渲染页面时动态地设置路由路径。这可以用于许多不同的应用场景。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------
------ - ------- - ---- ------------
----- --- - -- -- -
-----
------ ------------------------- ---------------------
------
--
------ ------- ----在上面的示例中，我们使用了动态路由。我们定义了一个 Route 组件，其路径为 /profile/:username。当用户访问 URL 时，:username 的部分将被视为参数，并将其作为属性传递给 Profile 组件。
重定向
在 React Router V4 中，你可以使用 <Redirect> 组件来重定向路由。这尤其适用于涉及身份验证和权限的情况。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ----- - ---- -------------------
------ - --------------- - ---- ----------
----- --- - -- -- -
-----
------ ----------------- ---------- -- -
----------------- - -
------------
- - -
--------- -------------
-
----
------
--
------ ------- ----在上面的示例中，我们定义了一个受到身份验证保护的 Dashboard 组件。如果用户已经进行身份验证，则渲染 Dashboard 组件。否则，我们会通过 <Redirect> 组件将用户重定向到登录页面。
导航
在 React Router V4 中，可以使用 <Link> 组件进行导航。Link 组件是 React Router 中用于创建导航链接的基本组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
----- ------ - -- -- -
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
--
------ ------- -------在上面的示例中，我们定义了一个 Header 组件，并在其中定义了三个不同的 Link 组件。当用户点击特定的链接时，React 会将其导航到相应的路由。
需要注意的是，在使用 Link 组件时，要确保其 href 属性的值是正确的，这将决定 React Router 中的匹配。与使用 HTML 链接不同的是，React Router 不会使用页面刷新来导航到不同的路由。
总结
在本文中，我们学习了 React Router V4 的 API 和用法，并了解了路由、嵌套路由、动态路由以及重定向功能。我们还了解了如何使用 Link 组件创建导航链接。
React Router V4 为 React 开发人员提供了灵活、高效的路由功能，并允许我们在应用程序中快速构建动态路径。我们希望这篇指南对你有所帮助，并帮你深入学习 React Router V4。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd5efb95b1f8cacdcd3a3a