升级 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 配置文件，生成临时文件以供使用

默认异步

[Diablohu]

参考 https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a

[Diablohu]

关于异步路由

• 特征: async: true 或存在属性 getComponent 为函数
  • 如果为 async: true 同时存在属性 component，利用 Babel 或 Webpack 转换为 getComponent
• 添加 component: 'koot/React/AsyncLoader.jsx'
• 框架级别实现 getComponent()
  • SSR 优先渲染异步路由对应组件的 js 文件的 script
  • AsyncLoader 内根据 route 对象动态载入对应组件，利用 <Lazy>
  • 如果对应的组件代码存在 (SSR 时) 直接渲染，如果不存在先渲染 Loader，然后执行 getComponent()，完成后渲染
• 新选项：componentWhileRouting
• Store 添加顶级属性：isRouting

关于 Link 和 IndexLink

• 开发 Webpack 插件，将引用这两个组件转为引用 koot/React/link.jsx，在这里进行兼容处理

[Diablohu]

选项: componentWhileRouting

默认值: 'loader' | false (0.12 之前版本)

可能的值

• 'loader' - 默认 Loader
• Pathname:Component - 显示指定组件
• false - 0.12 之前的默认行为，不做任何处理，等待加载完后渲染结果