Question

当前我有以下代码：

postgres

“ 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>

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

2 个答案: