React Router 是 React 生态系统中最流行的路由库之一，它可以帮助开发者在 React 应用中实现页面的路由跳转和管理。React Router4 是 React Router 的最新版本，它在之前的版本的基础上进行了重构和优化，提供了更好的性能和更灵活的 API。
本文将详细介绍 React Router4 的使用方法和原理，并提供示例代码以帮助读者更好地理解和应用。
安装和使用
React Router4 可以通过 npm 安装：
npm install react-router-dom --save
安装完成后，我们需要在应用中引入 React Router，通常在根组件（例如 App.js）中进行：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
-------- ----- -
------ -
--------
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- --------------------------
-----
-----
------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------ -------------- ------------------ --
------
---------
--
-
-------- ------ -
------ --------------
-
-------- ------- -
------ ---------------
-
-------- -------- -
------ ----------------
-
------ ------- ----在上面的例子中，我们使用了 BrowserRouter 作为路由容器，使用 Link 组件定义了三个导航链接，使用 Route 组件定义了三个路由。其中，exact 表示路径必须完全匹配，否则将无法匹配到该路由。
路由参数
React Router4 允许我们在路由路径中添加参数，以便动态地生成路由。例如，我们可以定义一个带有参数的路由：
<Route path="/users/:userId" component={User} />在上面的例子中，:userId 表示该路由带有一个参数 userId，我们可以在 User 组件中获取该参数：
function User(props) {
return <h2>User {props.match.params.userId}</h2>;
}在上面的例子中，我们使用了 props.match.params.userId 获取了路由参数 userId 的值。
嵌套路由
React Router4 允许我们在路由中嵌套子路由，以便更好地组织和管理页面结构。例如，我们可以定义一个嵌套路由：
-- -------------------- ---- -------
------ -------------- ------------------ --
-------- ------------- -
------ -
-----
---------------
----
----
----- -------------------------------------- --------
-----
----
----- -------------------------------------- --------
-----
----
----- -------------------------------------- --------
-----
-----
------ ------------------------------------- ----------------- --
------
--
-
-------- ------------ -
------ --------- ----------------------------------
-在上面的例子中，我们定义了一个 Topics 组件作为父路由，其中包含了三个子路由链接和一个子路由。在子路由链接中，我们使用了 ${props.match.url} 获取了父路由的路径，并在其后添加了子路由的路径。在子路由中，我们使用了 ${props.match.path} 获取了父路由的路径，并在其后添加了子路由的路径和参数。
重定向路由
React Router4 允许我们在路由中添加重定向，以便将用户自动跳转到指定的页面。例如，我们可以定义一个重定向路由：
<Route exact path="/" render={() => <Redirect to="/home" />} />在上面的例子中，我们使用了 Redirect 组件将用户自动跳转到 /home 页面。
路由守卫
React Router4 允许我们在路由跳转前进行一些额外的操作，例如验证用户登录状态、获取数据等。我们可以使用路由守卫来实现这些操作。例如，我们可以定义一个路由守卫：
-- -------------------- ---- -------
-------- -------------- ---------- ---------- ------- -- -
------ -
------
---------
------------- --
------------------------ - -
---------- ---------- --
- - -
---------
-----
--------- ---------
------ - ----- -------------- -
--
--
-
-
--
--
-在上面的例子中，我们定义了一个 PrivateRoute 组件作为路由守卫，它接受一个 component 属性和其他所有属性，并在跳转前判断用户是否登录。如果用户已登录，则渲染目标组件；否则，将用户重定向到登录页面，并保存当前页面的路径以便登录后自动跳转回来。
总结
React Router4 是 React 生态系统中最流行的路由库之一，它可以帮助开发者在 React 应用中实现页面的路由跳转和管理。本文介绍了 React Router4 的使用方法和原理，并提供了示例代码以帮助读者更好地理解和应用。在实际开发中，我们可以根据需要使用路由参数、嵌套路由、重定向路由和路由守卫等功能来实现更灵活和高效的页面管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/663d8ea6d3423812e4b9b74a