使用react-router定制动态路由

Question

我正在开展的项目几乎没有非常规路线要求。 该路由具有以下结构/<--name-->-abc-xyz-<--id-->其中name和id是动态的。 现在我想使用反应路由器匹配此路由。 所以我做了以下事情

<Route path='/:name-abc-xyz-:id' component={View} />

对于名称名称为def-abc-xyz- *的情况，这会失败。

如何修复此问题，以便直接在View组件中获取name和id的值。

我有一个解决方法，我做<Route path='/:dynamicId' component={View} />

现在我解析dynamicId并从我的View组件中取出它的名称和id。 有没有办法在不解析的情况下实现以下目的？

Answer 1

标准路由

在V4中管理它的标准方法是在config中提供以下路由：

/:name/abc-xyz/:id

如果您不受另一个解析器约束使用上述虚线架构，则此解决方案将满足您的需求。

参考： https ： //github.com/reacttraining/react-router/tree/master/packages/react-router-config#route-configuration-shape

如果您与静态路由冲突，请将动态路由放在路径脚手架中

参考： https ： //tylermcginnis.com/react-router-ambiguous-matches/

自定义路由格式

另外，请注意

React Router使用path-to-regexp进行路由匹配。

这意味着如果您以这种格式提供路线：

/:name(\w+-)?abc-xyz(\w+-)?:id

比较（IE）时这也会起作用

def-abc-xyz-12

路线测试仪截图

参考： https ： //github.com/ReactTraining/react-router/issues/5536#issuecomment-330548834

路线测试仪： https ： //pshrmn.github.io/route-tester/#/def-abc-xyz-12