我正在从事的项目对非常规路线的要求很少。该路由具有以下结构/<--name-->-abc-xyz-<--id-->
,其中名称和ID是动态的。现在我想使用反应路由器匹配此路由。所以我做了以下
<Route path='/:name-abc-xyz-:id' component={View} />
对于名称name格式为def-abc-xyz- *的情况,此操作将失败。
如何解决此问题,以便我直接在View组件中获得名称和ID的值。
我有一种解决方法
<Route path='/:dynamicId' component={View} />
现在我解析dynamicId并在View组件中从中取出名称和ID。是否有一种无需解析即可实现以下目标的方法?
答案 0 :(得分:2)
在V4中对此进行管理的标准方法是在config中提供如下路由:
/:name/abc-xyz/:id
如果您不受其他解析器的约束,可以使用上述虚线模式,则此解决方案将满足您的需求。
如果您与静态路由冲突,请将动态路由放在路由脚手架的最后
参考: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