升级 react-router 到 v5

[Diablohu]

目前结论：暂不升级

原因：服务端渲染部分的周边工具尚不完善，包括官方提供的部分 API 仍在 alpha 阶段。

需要等待完善的框架/组件/库：

• react-router-config
• react-router-redux
  • ConnectedRouter 产生的组件属性不完善
• history

升级注意事项

• 在尝试中修改的代码详见 react-router-v4 分支
• react-router-config 的 match() 方法与 v3 同名的方法有较大差异。在升级时需要自己拼装 renderProps 返回值。需提前准备与 v3 兼容的数据结构
• 路由配置中的拆包方式 (getComponent) 已被废弃，需要自行编写异步组件
  • 升级分支中的 React/asyncCompnent 为一个可行的组件
• 可借此机会重新组织 React 同构项目的逻辑代码
  • 当前 ReactApp 根目录下的文件多为仅服务器端使用

参考文章

• https://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/

koot-migrate

路由配置文件

• 移除所有 indexRoute
  • 改到子路由的第一项：{ path: '/', exact: true }
• childRoutes -> routes
• getComonent 修改为 import 方式

警报

• 对 Link 的引用

[Diablohu]

新的思路 & 想法

• 启动时根据项目给定的 routes，临时生成 react-router 使用的 routes 配置文件
  • 如果有 v3 特征或没有 v4 特征，转成 v4 版本
  • 转制时，考虑拆包/异步加载实现方案
• 利用 Webpack loader 或 plugin，将引用 Link 和 IndexLink 的代码转制成从对应的 react-router 库中引用 (react-router-dom 等)
• 如果 match() 方法仍不满足要求，自写
• 可配置页面信息 (react-router 对象上可以绑定 meta 信息，用来取代 @KootExtend({ pageInfo: }) 相关 #20)

[Diablohu]

https://github.com/supasate/connected-react-router

[Diablohu]

解析 routes 配置文件，生成临时文件以供使用

默认异步