有点老调重弹了,写短一点,这篇文档介绍一下 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,所以这些组件后面会继续维护,保证我自己的代码没有问题.