javascript - react-router-dom - 将参数添加到索引 url 但接受页面

Question

目前我有以下代码:

<Router history={history}>
  <div>
    <Route exact path="/:id?" component={Container1} />
    <Route path="/component2/ component={Container2} />
  </div>
</Router>

“localhost:3000”返回容器 1(如预期)。

“localhost:3000/123”返回容器 1 的不同 View (如预期)。

但是，当我导航到“localhost:3000/component2/”时，它会出现在组件 1 旁边。

我的问题是如何使索引路由同时采用 id 但仍接受组件？

Answer 1

你可以尝试将这两条路由包裹在 Switch 中，像这样:

<Router history={history}>
  <div>
    <Switch>
      <Route path="/component2/" component={Container2} />
      <Route exact path="/:id?" component={Container1} />
    </Switch>
  </div>
</Router>