# 正文

前面几节我们实现了一个最基础的 react ssr，同时也初步接触了同构，双端渲染同一个组件，服务端直出 html 结构，浏览器端也能够实现组件事件的绑定。

然后又对应用骨架的开发体验做了一次重要的升级。

# 引出问题

虽然我们能展示页面并且执行事件，但我们还缺一个非常重要的能力。

那就是路由！

现在我们只有一个路由，属于服务端的根路由 / 。

我们无论怎么在浏览器内改变路由地址都会显示同一个UI。

当然我们的项目不可能只有一个页面，那我们该怎样来处理和维护项目的路由呢？

# 路由同构

由于我们打造的是基于服务端渲染的React SPA应用开发骨架，所以服务端和客户端都需要对路由进行处理。

我们使用的是React,那前端路由肯定会使用react-router来处理。

那服务端呢？服务端也需要单独维护一套路由？

当然不需要，这样不科学，更不合理。

在前几节我们初步接触了同构，现在解决这个问题的办法还是同构 - 路由同构，经过同构后服务端和客户端可以使用同一套路由。

# 同构思路与实现

先整体说下实现思路,让大家先有个基本的了解。

当第一请求页面的时候，服务端接收请求，根据当前的path来查找具体的路由，然后根据路由得到具体的组件，然后将组件直出。

服务端直出后，页面由浏览器接管，后面的渲染执行就交给前端代码了。

思路很简单，接下来看下具体的实现和代码。

创建一个客户端路由配置

从react router4开始，react对路由做了重大的升级，将组件化的思想贯彻到底 - 一切皆组件。

所以从v4版本开始不再是集中式路由配置，路由也是组件，也可以和 UI 写在一起。

当然你仍然可以使用集中式的路由配置方式。

新增一个Layout组件作为页面公共组件，在这个组件内进行路由渲染,当然也可以不用，这里也是为了让每个页面都有公共部分，无需每重复渲染。

具体用不用看自身的业务即可。

// ./src/client/app/layout.js

import React from 'react';
import { Link } from 'react-router-dom';
export default class Index extends React.Component{
constructor(props){
 super(props);
}
render(){
return  <div>
    <Link to="/index">首页</Link>  <Link to="/artice">列表页</Link>
    <div>{this.props.children}</div>
    </div>
}
}

配置路由

顺便简单介绍几个react router4的路由组件 Route, Switch, BrowserRouter

Route 组件

用于绑定组件和path的关系,一般使用component属性指定要渲染的组件,其中exact属性表示是否是精确匹配模式，默认是false。

 <Route path="/index"  exact={true} component={Index}></Route>
Switch 组件

使用该组件只会渲染第一个匹配到的路由，否则所有的路由都会渲染。

  <Switch>
      <Route path="/"  exact={true} component={Root}></Route>
      <Route path="/list" exact={true} component={List}></Route>
  </Switch>
BrowserRouter 组件

此组件相信大家都熟悉，基于浏览器 History api 来达到浏览器地址和 UI