有点老调重弹了, 写短一点, 这篇文档介绍一下 router-as-view 组件的改进.
组件前身是在简聊当中使用的 router-view 组件, 独立实现的路由,
由于我重构了的简聊 Store 方案, 发现路由存在私有状态, 于是设计了这个方案.
后来简聊停在了那个版本, GitHub 上的代码也就大概锁死了,
所以最近我重命名了组件为 router-as-view 以便以后使用:
https://github.com/react-chin…
Demo 也更新了, 可以直接点击查看:
http://repo.react-china.org/r…

嵌套路由, 嵌套数据

这次修改主要改变的是路由的数据表示, 比如这个地址:

/team/23/room/34

我定义的路由规则是这样的, key 是名字, value 是参数, 可能有多个参数:

rules = Immutable.fromJS {
  home: []         # means / or /home
  demo: []         # means /demo
  team: ['teamId'] # means /team/:teamId
  room: ['roomId'] # means /room/:roomId
  '中文': ['中文']   # means /中文/:中文
}

然后解析路由时会按匹配名字, 再匹配参数个数, 然后生成嵌套的路由数据:

{
  "router": {
    "name": "team",
    "data": {
      "teamId": "23"
    },
    "query": {},
    "router": {
      "name": "room",
      "data": {
        "roomId": "34"
      },
      "query": {}
    }
  }
}

原先在简聊用的路由数据是一层的, 嵌套路由的情况在顶层判断并不方便.
现在是嵌套的 router, 那么父级路由直接就包含自路由了, 方便一些.
其他方面大概没什么改变, 主要还是为了扩展路由的灵活性.

增加的缺点

也带来一些问题, 就是要求路由比如有对应的数据,
一个是 / 路由, 另一个是 404 的处理上.
/ 是一个特殊的路由, 没有任何字段可用于判断, 所以我强制映射到和 /home,
或者说 /home 有些情况也要被映射成 /, 有点强制性..
而 404 表示的是”找不到目标”, 那么, 所有找到不的路由就自动 404 了,
比如说父级路由找到了, 然后再匹配却找不到, 就是一个很自然的 404.

对于强迫症来说, 强制设置这么多规则是有问题的,
而且从灵活性上考量, 这比起其他的路由方案也增加了一些约束,
react-router 其实用的蛮漂亮的办法解决了嵌套路由的问题,
只是说它看起来太像是私有状态了, 我对它不信任.

小结

除了 router-as-view, 还有个 actions-in-recorder 也放出了,
以后写 React 我还是想用这套方案, 实在不行再用 Redux,
所以这些组件后面会继续维护, 保证我自己的代码没有问题.