有点老调重弹了, 写短一点, 这篇文档介绍一下 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,
所以这些组件后面会继续维护, 保证我自己的代码没有问题.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。