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无法实现的。

在索引路由

1 个答案: