通过个例子，一方面，你就掌握了一个简单路由机制的实现，从而可以在一些简单的应用中直接使用，避免引入太多依赖。

另一方面，理解了路由实现的原理，也就能更从容地去使用更完善的第三方路由管理框架了。完整的代码和运行效果你也可以通过文末的链接查看。

使用 React Router

React Router 作为 React 全家桶三大成员之一，是几乎所有 React 应用的必备。虽然在刚才的例子中，我们自己实现的机制也能简单地进行路由管理。

但是在实际项目中，还有更多的情况需要考虑，比如路由嵌套、URL 的模式匹配、参数提取等。这些细节上的考虑，意味着我们要做一个完整的路由框架，还是需要很大的工作量的，所以你完全可以用 React Router 这样更成熟的开源方案去管理路由，而无须自己开发。

幸运的是，React Router 的使用非常简单，几乎不需要学习成本，你看一个使用的例子就明白了。

如果你细心的话会发现，我们课程的所有示例页面，就是用 React Router 去管理的。下面就是我们课程 App 的根组件。为了缩短这里代码的长度，就以定义了两讲的示例代码页面路由为例：

// 从 react-router-dom 引入路由框架提供的一些组件
import { BrowserRouter, Switch, Route, Link } from “react-router-dom”;
// 引入了两个课程示例页面
import Counter from “./01/Counter”;
import UserList from “./01/UserList”;

// 使用数组定义了页面组件和导航的标题，从而方便下面的渲染逻辑
const routes = [
[“01 Counter”, Counter],
[“01 UserList”, UserList],
];
function App() {
return (

这里需要注意，React Router 不仅支持浏览器，还支持 React Native，以及一些用 Web 实现的移动 App，所以它提供了多个 npm 模块。

代码里看到的 react-router-dom，其实正是支持浏览器的模块。我们在开发运行于浏览器的 Web App 时，只要引入这个包就可以了。

同时，我们也看到了 BrowserRouter、Link、Route、Switch 等组件的用法。接下来我就简单解释一下组件的作用。

BrowserRouter：标识用标准的 URL 路径去管理路由，比如 /my-page1 这样的标准 URL 路径。除此之外，还有 MemoryRouter，表示通过内存管理路由；HashRouter，标识通过 hash 管理路由。我们自己实现的例子其实就是用的 hash 来实现路由。

Link：定义一个导航链接，点击时可以无刷新地改变页面 URL，从而实现 React Router 控制的导航。

Route: 定义一条路由规则，可以指定匹配的路径、要渲染的内容等等。

Switch：在默认情况下，所有匹配的 Route 节点都会被展示，但是 Switch 标记可以保证只有第一个匹配到的路由才会被渲染。

这样，我们就使用了 React Router 提供的最基础的功能，实现了页面级别的路由管理。

但是我们要知道，React Router 的能力并不止于此，它的功能非常强大。我强烈建议你去完整阅读下它的官方文档，它的文档都是示例的形式，并不长，很容易看完，这样你就能够知道它的所有能力，从而在遇到具体需求的时候灵活运用。

那么接下来的内容，我们就以 React Router 为基础，来看看路由管理有哪些具体使用场景。相信通过这些例子，你能够进一步了解 React Router 提供的功能。

使用嵌套路由：实现二级导航页面

所谓嵌套路由，也称为子路由，就是一个页面组件内部，还需要通过 URL 上的信息来决定组件内部某个区域 该 如何显示。

嵌套路由对应到业务功能，一般就是一个两级导航页面。比如左边是侧边栏导航，用于控制右侧页面的展示。而右侧某个页面呢，又要通过顶部菜单来控制组件的展示。下面这张图就展示了这样一个布局：

这就需要路由框架具备两个能力：

1. 能够模糊匹配。比如 /page1/general、/page1/profile 这样两个路由，需要都能匹配到 Page1 这样一个组件。然后 Page1 内部呢，再根据 general 和 profile 这两个子路由决定展示哪个具体的页面。
2. Route 能够嵌套使用。在我们自定义 Route 的例子中，Route 组件仅用于收集路由定义的信息，不渲染任何内容。如果需要路由能嵌套使用，那就意味着需要在 Route 下还能嵌套使用 Route。而这在 React Router 是提供支持的。

下面的代码就展示了嵌套路由的用法：

import { BrowserRouter, Route, Link } from “react-router-dom”;

const Page1 = () => {
return (

function NestedRouting() {
return (

Nested Routing

可以看到，我们首先在 NestedRouting 组件内部定义了一级导航，让以“/page1”开头的路径都使用 Page1 这个组件，而在 Page1 组件内部，就继续使用 Route 组件来定义二级导航。那么这时候的路径，就都是以“/page1”开头的，比如“/page1/general”。通过这样的机制，我们很容易就完成了二级导航这样一个常用的页面导航模式。

在 URL 中保存页面状态

这节课一开始我就提到了，拥有 URL 是 Web 应用和传统应用最大的一个区别。这意味这 Web 应用的内容是很容易分享的，只要发送一个 URL，别人就能和我们看到同样的内容。

所以在 Web 应用中我们一定要利用好这个特性，一方面可以提升用户体验， 另一方面也可以 简化页面之间的交互。

要做到这一点，就需要能将页面的一些状态存放到 URL 中。那么底下我们就通过一个例子，来看看应该如何利用 React Router 来管理 URL 中的参数。下面这张图就展示了这样一个场景：

页面上有一个 Tabs 组件，在两个 Tab 下分别有两个可以分页的表格。如果要将页面的内容分享给别人，一方面需要定位到当前展开的是哪个 Tab，同时还应该知道当前是表格的第几页，这样别人通过这个 URL 才能看到和你一样的内容。所以我们只要将当前 Tab 状态，和页码的状态放到 URL 中，就可以实现这样的功能。

那么如何去做呢？首先，我们需要利用 React Router 的参数功能来定义一条路由：

  <div className="exp-15-router-auth">  
    <div className="exp-15-sider">  
      <Link to="/15/RouterAuth/page1">Page 1</Link>  
      <Link to="/15/RouterAuth/page2">Page 2</Link>  
    </div>  
    <div className="exp-15-page-container">  
      {/* */}  
      {routes.map((r) => (  
        <Route path={r.path} component={r.component} />  
      ))}  
    </div>  
  </div>  
</div>