有没觉得 react-router 的“去中心化”，用起来很难受

[revalue]

最近弄一个后台系统页面，后端发一个大型的权限树过来。其实就是比对 url 判断权限就可以了，如果有多级 switch 组件就要截断或者拼接 url 来比对。

这个 url 其实是和组件的嵌套关系耦合的，改起来真麻烦。

在路由拦截层面，react-router 都是在一个一个“关卡”手动搞权限判断，这个精度和操作空间是细了，但是管理起来好麻烦。

是 vue-router 给宠的？

[maichael]

再封装一层，例如这种方法 https://zhuanlan.zhihu.com/p/84390547

[revalue]

@maichael 额，封装是可以，那么去中心化的意义何在

[maichael]

@revalue #2 你也可以中心化的写呀，Route4 之后 route 才是一个真正意义上的 component，和其它普通的 component 没有区别，方便于根据路由做更精细化的控制，但你想要做大一统的路由也完全没问题，https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

[Hasel]

#3 说的很对。react-router 给了你选择的权利，可以自己封装一个大一统的路由，也可以自己散布在各个组件中精细控制，一切取决你怎么使用而已。
封一个和 vue-router 一样的也很方便嘛。

[yazoox]

不是很懂 react router 有没有讲解的比较好的？谢谢

[KuroNekoFan]

你可以不同的 page 引入封装好的判断方法...

[aegisho]

按我们以前的设计 react-router 只是定义路径和组件的关系。权限的判断应该是在类似菜单组件中

举例：系统中有 100 个 react-router 定义的路径，这是不跟权限关联的
权限决定的是“用户可见的菜单”有多少个。

假设用户没有 A 路径的权限，他无法通过菜单进入，但是可以通过手输地址进入。
同样的，接口层也会做鉴权，所以用户直接进入是无效的。

如果期望用户手输地址也无法进入，可以考虑在 layout 组件中加一个判断，在 router change 时判断是否有权限，如果没有权限，直接跳转到 403 页面

[soulmt]

router3 是和 vue-router 有点像的 router4 开始有了这个理念，这个理念很先进，但是也同样支持你希望的集中配置，但是去中心化的问题，集中配置也存在，当一个项目里面有上百个路由，而你却还要梳理各个路由之间的关系的时候你会很奔溃， 其实这东西没有一个完整的答案，既然是去中心化的开发，那么你应该用去中心的思路去梳理代码，如果是集中配置，那么就平铺式的梳理代码，自然各有各的好处, 有时候还是要兼容不同的思想