反应路由器路径语法混乱

Question

有人可以解释为什么在斜线应用于子路径时找不到子路径

<Route path=":paramName1">
    ...
    <Route path="/:paramName2" component={Child} />
</Route>

当斜杠被应用到父路径时，是否成功？

<Route path=":paramName1(/)">
    ...
    <Route path=":paramName2" component={Child} />
</Route>

Answer 1

您无意中发现https://github.com/rackt/react-router/blob/v1.0.3/docs/guides/basics/RouteConfiguration.md#decoupling-the-ui-from-the-url。

更简单的例子，如果你这样做

<Route path="/foo" component={Parent}>
  <Route path="/bar" component={Child} />
</Route>

Child的路径实际上是/bar，而不是/foo/bar。

在你的情况下，你只是想要

<Route path="/:foo" component={Parent}>
  <Route path=":bar" component={Child} />
</Route>

获取/:foo/:bar的{​​{1}}。