随着前端技术的不断发展，单页应用（SPA）得到了越来越广泛的应用。SPA 的核心是路由，而为了方便管理路由，现在有很多优秀的路由库，其中 npm 包 r-router 是一个非常好用的路由库。
什么是 r-router
r-router 是一个基于 React 的前端路由库，使用简单且功能强大。它可以根据浏览器的 URL，自动渲染相应的组件，并且支持从浏览器的地址栏中获取参数。
安装 r-router
首先我们需要安装 r-router，在终端中执行以下命令：
npm install r-router --save
使用 r-router
使用 r-router 很简单，我们只需要将整个应用都包裹在 <router> 组件中，然后在需要展示的组件前添加 <route> 组件即可。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -----------
------ ---- ---- --------------------
------ ----- ---- ---------------------
-------- ----- -
------ -
--------
------ -------- ---------------- --
------ ------------- ----------------- --
---------
--
-
------ ------- ----在上面的代码中，我们在 <router> 组件中分别添加了两个 <route> 组件，分别对应了首页和关于页面。当用户访问首页时，即访问根路径 "/" 时，<home> 组件就会被渲染；当用户访问关于页面时，即访问 "/about" 路径时，<about> 组件就会被渲染。
路由嵌套
有时候我们需要在一个页面中展示多个子页面，这时可以使用路由嵌套。在 r-router 中，我们只需要在组件中添加更多的 <route> 组件即可。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -----------
------ ---- ---- --------------------
------ ----- ---- ---------------------
------ ------- ---- -----------------------
-------- ----- -
------ -
--------
------ -------- -----------------
------ ------------ ----------------- --
------ -------------- ------------------- --
--------
---------
--
-
------ ------- --- 在上面的代码中，我们在 <home> 组件中添加了两个子 <route> 组件，分别对应了关于页面和联系页面。当用户访问关于页面时，即访问 "/about" 路径时，<about> 组件就会被渲染；当用户访问联系页面时，即访问 "/contact" 路径时，<contact> 组件就会被渲染。
动态路由
有时候我们需要动态地生成路由，这时可以使用动态路由。在 r-router 中，我们可以在路由路径中添加参数，这些参数可以在组件中通过 this.props.params 来访问。下面是一个示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -----------
------ ---- ---- --------------------
-------- ----- -
------ -
--------
------ ---------------- ---------------- --
---------
--
-
------ ------- --- 在上面的代码中，我们在路径中添加了一个名为 "id" 的参数，用户访问 "/user/1" 路径时就会访问 id 为 1 的用户信息。在 <user> 组件中，我们可以通过 this.props.params.id 来获取用户的 ID。
总结
r-router 是一个非常好用的 React 路由库，使用它可以方便地管理前端路由。通过本文的介绍，我们了解了 r-router 的使用和一些常见的路由情况。希望读者可以在实际应用中灵活使用 r-router，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a681e8991b448dfe68