React Router 是一个基于 React 的路由库，它可以帮助我们在单页应用中实现路由跳转。本文将详细介绍 React Router 的使用以及一些开发技巧和注意事项。
快速开始
安装 React Router：
npm install react-router-dom
在 React 中使用 React Router：
-- -------------------- ---- ------- ------ - -------------- ------ ------ - ---- ------------------- -------- ----- - ------ - --------------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ ------------- ----------------- -- ------ -------------------- -- --------- ---------------- -- -展开代码
上面的代码定义了三个路由和一个默认路由。当用户访问 / 时，会渲染 Home 组件；访问 /about 时，会渲染 About 组件；访问 /users 时，会渲染 Users 组件；访问其他 URL 时，会渲染 NotFound 组件。
React Router 提供了多种路由类型和路由参数设置方式，更多示例和用法请参考 官方文档。
路由嵌套
React Router 支持多层路由嵌套，我们可以在一个组件内定义子路由，这些子路由可以拥有自己的路径、参数和组件。
-- -------------------- ---- ------- ------ - -------------- ------ ------ - ---- ------------------- -------- ----- - ------ - --------------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ ------------- ----------------- -- ------ -------------------- -- --------- ---------------- -- - -------- ------- - ------ - ----- -------------- -------- ------ ----- ------------- --------------------- -- ------ ----------------- ---------------- -- ------ ------------------------ -- --------- ------ -- -展开代码
上面的代码中，Users 组件包含三个子路由，分别对应 /users、/users/:id、以及其他未匹配的路径。在 /users/:id 路径中，:id 是参数，可以用来唯一标识一个用户。用户 id 可以从 props.match.params.id 中获取。
路由保护
有些路由需要登录之后才能访问，我们可以通过 React Router 的高阶组件 withRouter 和 Redirect 来实现路由保护。
-- -------------------- ---- ------- ------ - -------------- ------ ------- -------- - ---- ------------------- -------- ----- - ------ - --------------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------------- --------------- ------------------- -- ------ -------------------- -- --------- ---------------- -- - -------- -------------- ---------- ---------- ------- -- - ----- ---------- - ------ -- ----- ------- ---- ------ -------------- ----- ------ - ------ --------- --------------- -- ---------- - - ---------- ---------- -- - - - --------- ----- --------- --------- ------ - ----- -------------- -- -- -- - - -- -- -展开代码
上面的代码中，PrivateRoute 组件是一个自定义的路由组件，它用来实现路由保护。当用户访问 /profile 路径时，PrivateRoute 组件会检查用户是否已经登录，如果没有登录，则重定向到登录页面；如果已经登录，则渲染 Profile 组件。
小结
React Router 是 React 中非常实用的一个路由库，可以帮助我们在单页应用中实现路由跳转。本文中，我们介绍了 React Router 的基本使用、路由嵌套、路由保护等常用功能。希望对读者能有所帮助，如果想要学习更多关于 React Router 的内容，请参考官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b994a8306f20b3a6807728
