React Router 是一个流行的用于在 React Web 应用程序中进行路由的库。它为我们提供了一种使用 URL 来切换页面的方式。在实际项目中，React Router 是必不可少的工具之一。
基础知识
在使用 React Router 之前，需要了解一些基本概念。
BrowserRouter 和 HashRouter
React Router 有两种路由器：BrowserRouter 和 HashRouter。BrowserRouter 使用基于 HTML5 的浏览器 API，而 HashRouter 则是使用 URL 中的 hash 部分。以 BrowserRouter 为例：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ -------------------- --
---------
---------
--
-Route
Route 组件用于定义路由规则。它基于 URL 中的 path 属性来匹配，并通过 component 属性指定渲染的组件。
<Route path="/" exact component={Home} />Link
Link 组件用于生成跳转链接。
<Link to="/">Home</Link>
Switch
Switch 组件用于从定义的路由规则中选择匹配的第一个进行渲染。
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>实际项目中的使用经验
在实际项目中，React Router 可以帮助我们实现复杂的路由需求，如动态路由、嵌套路由、懒加载等。
嵌套路由
在一些场景下，我们需要在一个页面中通过菜单来展示不同的内容，这时候就可以使用嵌套路由。
-- -------------------- ---- -------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ---------------- ---------------------
--------
------ --------------------------- ------------------------- --
------ ---------------- ----------------------- --
---------
--------
------ -------------------- --
---------
---------
--
-在上面的示例中，/products/:productId 会匹配 "/products/123" 这种动态路由，而 /products 路由则会显示产品列表。
动态路由
动态路由是指路由的 path 可以根据实际情况动态生成，例如用户详情页的路由：/users/:userId。
-- -------------------- ---- -------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ --------------------- ---------------- --
------ -------------------- --
---------
---------
--
-可以通过 this.props.match.params.userId 获取路由参数。
懒加载
在实际项目中，当页面变得越来越大时，我们不希望用户一次性加载完所有的页面。这时候就可以使用代码分割和懒加载。
React Router 支持使用 React.lazy() 和 React.Suspense 实现组件的懒加载。
-- -------------------- ---- -------
----- ----- - ------------- -- ------------------
-------- ----- -
------ -
--------
--------- ---------------------------------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ -------------------- --
---------
-----------
---------
--
-总结
React Router 是一个强大的工具，可以快速实现路由功能。在实际项目中，需要注意嵌套路由、动态路由和懒加载等问题。让我们在实际项目中更好地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa9dfe48841e98946b59f4