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 的不同视图（如预期的那样）。

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

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

标签： javascriptreactjspathroutesreact-router

Answer 1

您可以尝试将这两个路由包装在Switch中，如下所示：

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