React Router Router V4通配符旁边的索引路线

Question

假设我们有此设置

const Parent = () => (
  <Switch>
    <Route path="/data" component={Child}
  </Switch>
)
const Child = () => (
  <Switch>
    <Route exact path="/" component={SomethingList} />
    <Route path="/:id" component={ShowSomething} />
  </Switch>
);

当我渲染父时，我希望someUrl/data渲染SomethingList和someUrl/5渲染ShowSomething。实际发生的是两个渲染ShowSomething。

如何获得我期望与React-Router V4的行为？

Answer 1

那是因为/:id并不意味着它必须是整数值。它可以是类似的：/some-path-和id等于some-path。这就是为什么您得到这种行为。

在您的上下文中，渲染SomethingList的唯一方法是使用/路由。什么都不会匹配。我会这样做：

const Parent = () => (
  <Switch>
    <Route path="/data" component={Child}
  </Switch>
)
const Child = () => (
  <Switch>
    <Route exact path="/data" component={SomethingList} />
    <Route path="/data/:id" component={ShowSomething} />
  </Switch>
);

我想您认为您可以在孩子组成部分中声明相对路径，而RR4不可能（我认为）。