React SSR路由支持实现

实现思路分析

在 React SSR 项目中需要实现两端路由.
客户端路由是用于支持用户通过点击链接的形式跳转页面.
服务器端路由是用于支持用户直接从浏览器地址栏中访问页面.
客户端和服务器端公用一套路由规则，路由规则是同构代码

路由规则

使用数组形式配置信息，在普通的 node 环境下也可识别

// share/routes.js
import Home from '../share/pages/Home';
import List from '../share/pages/List';

export default [{
   
  path: '/',
  component: Home,
  exact: true
}, {
   
  path: '/list',
  component: List,
  exact: true
}]

实现服务器端路由

• Express 路由接收任何请求
  Express 路由接收所有 GET 请求, 服务器端 React 路由通过请求路径匹配要进行渲染的组件

// server/index.js
import app from './http';
import renderer from './renderer';

app