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又接受一个组件？

Answer 1

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

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

Answer 2

React Router处理路由的优先级与定义它们的顺序相同。 所以你的情况应该是

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