04-创建路由器

7.2　创建路由器

我们将使用组件从头构建一个简单的路由器，以便能更好地理解React应用程序如何进行路由处理。这里是从较高层次来看我们要怎样推进。

• 我们将创建两个组件，即Router和Route，它们会一起用于完成客户端路由。
• Router组件由Route组件组成。
• 每个Route代表一个URL路径（/、/posts/123）并将一个组件映射到该URL。当用户们访问 / 时，他们会看到该路径的组件。
• Router组件看起来就像一个普通React组件（它有 render 方法、组件方法并且使用了JSX），但它可以将组件映射到URL上。
• Route组件可以指定/users/:user这样的参数，其中:user语法表示传递给组件的值。
• 我们还会创建一个Link组件，这将使客户端路由器能够进行导航。

如果感觉还不是完全清楚，不必担心，我们将依次完成每一步。让我们看一个例子，当构建路由时我们要努力实现什么。

代码清单7-1展示了将要构建的Router组件的最终形式。它易于阅读和思考：你拥有一个由绑定到组件的路由组成的路由器。路由不一定非要是层级结构的（可以创建混乱的和任意嵌套的资源），尽管往往是这样的。这意味着它可以相对容易地映射到React的组合语义上。如果第一次接触使用React，那么代码清单7-1中的路由示例可能是能够立即理解的最容易的组件之一。

代码清单7-1　Router组件的最终结果（src/index.js）

//...
    <Router location="/">  ⇽--- Router组件存储路由并返回合适的组件用于渲染
      <Route path="/" component={App}>  ⇽--- 每个Route组件接收一个路径和一个组件并把它们匹配在一起，并且可以在彼此之间嵌套几个组件
        <Route path="posts/:post" component={SinglePost} />  ⇽--- 可以将代表动态值的参数传递给组件路径，这意味着可以从路由获取数据并在组件里使用它们
        <Route path="login" component={Login} />
      </Route>
    </Router>,
//...

这种路由器结构易于阅读和思考。多亏了React的Router，React应用中的路由也相当完善。我们会使用相同的基本API来效仿构建自己的路由器。当这样做的时候，我们会从TJ Holowaychuk创建的一个小型轻量路由器库 react-enroute 中获取灵感和方向。我们通过这个库可以探索React中的路由而不必重新创建像React Router这样的完整开源库。

我们已经清楚将要创建的是什么以及它应该如何使用，但我们从哪里开始好呢？我们从children开始。