目标

上一次做了一个简单的hello world，这个我给单页面应用加入路由，这里我用的是react-router v4。这里为了简单就只设置两个页面，一个home页面，一个about页面

项目设置

安装路由包

npm install react-router react-router-dom --save

编写应用

创建home和about组件
<root>/app/web/component/home/home.js

import React from 'react';

const Home = () => {
  return (
    <div>Home</div>
  );
};

export default Home;

<root>/app/web/component/about/about.js

import React from 'react';

const About = () => {
  return (
    <div>About</div>
  );
};

export default About;

设置浏览器端路由
<root>/app/web/component/app/admin.js

import React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from '../home/home';
import About from '../about/about';

const App = ({ msg }) => {
  return (
    <div>
      <div>Hello { msg }</div>
      <ul>
        <li>
          <Link to="/admin">Home</Link>
        </li>
        <li>
          <Link to="/admin/about">About</Link>
        </li>
      </ul>
      <hr />
      <Route exact path="/admin" component={Home} />
      <Route path="/admin/about" component={About} />
    </div>
  )
};

export default App;

这样当访问/admin的时候就会渲染home组件，访问/admin/about就会渲染about组件
然后我们期望浏览器端是使用H5的history API实现路由，所以我们使用BrowserRouter，修改
<root>/app/web/page/browser/admin.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import AdminApp from '../../component/app/admin';

ReactDOM.hydrate((
  <BrowserRouter {...window.__STATE__}>
    <AdminApp {...window.__STATE__}/>
  </BrowserRouter>
), document.getElementById('root'));

设置服务端路由
首先，我们要确保当浏览器访问/admin 和 /admin/about这样的以/admin开头的路由的时候，服务器能够渲染出页面。也就是说，当访问/admin/about的时候，服务器不能返回404。我们修改
<root>/app/router.js

const admin = require('./controller/admin');

module.exports = app => {
  const { router } = app;
  // 匹配所有/admin开头的url
  router.get('/admin(.*)', admin.admin);
};

/admin(.*) 代表所有访问以/admin开头的url时，都会被admin这个controller处理。这样就不会返回404了。
当然，光是不反回404还是不够的，我们需要react根据url渲染出对应的html文本，我们还需要修改
<root>/app/web/page/server/admin.js

import React from 'react';
import { StaticRouter } from 'react-router-dom';

import AdminLayout from '../../component/layout/admin_layout';
import AdminApp from '../../component/app/admin';

const server = context => {
  return (
    <AdminLayout state={context}>
      <StaticRouter {...context} location={ context.url } >
        <AdminApp {...context} />
      </StaticRouter>
    </AdminLayout>
  )
};
export default server;

上面代码关键点在于给StaticRouter传入了一个context.url，但是目前为止，我们还没有再服务端传入这个属性，所有需要修改
<root>/app/middleware/react_view.js

const assert = require('assert');
const path = require('path');
const fs = require('fs');
const ReactDOMServer = require('react-dom/server');

const defaults = {
  view: path.resolve(process.cwd(), 'view'),
  extname: 'js'
};

module.exports = (options, app) => {
  options = options || {};
  options = Object.assign({}, defaults, options);
  assert(typeof options.view === 'string', 'options.view required, and must be a string');
  assert(fs.existsSync(options.view), `Directory ${options.view} not exists`);
  options.extname = options.extname.trim().replace(/^\.?/, '.');
  app.context.render = function (filename, _context) {
    if (!path.extname(filename)) {
      filename += options.extname;
    }
    let filepath = path.isAbsolute(filename) ? filename : path.resolve(options.view, filename);
    const context = Object.assign({}, this.state, _context);
    // 添加 url 属性
    if (!context.url) {
      context.url = this.url;
    }
    try {
      let view = require(filepath);
      view = view.default || component;
      this.body = ReactDOMServer.renderToString(view(context));
      this.type = 'html';
    } catch (err) {
      err.code = 'REACT';
      throw err;
    }
  }
};

目前为止，路由就加上了，执行命令