reactjs - React-router-dom 未按预期工作

Question

这个问题已经有答案了:

React Router v4 renders multiple routes (3 个回答)

已关闭 6 年前。

我想实现这个(V3)

<Router>
    <Route path="/" component={App}/>
    <Route path="*" component={Whoops404}/>
</Router>

使用react-router-dom的react-router V4，但当我尝试这个时我无法做到这一点

<BrowserRouter>
    <div>
        <Route path="/" component={App}/>
        <Route path="*" component={Whoops404}/>
    </div>
</BrowserRouter>

它会渲染 block 中的​​所有路线。我做错了吗？

****编辑****
谢谢你们。我已经用 Switch 组件包装了路由，它工作正常，但是当我导航到 localhost:3000/jjj 时或除 http://localhost:3000/ 之外的其他路线组件应用程序仍然显示。

Answer 1

您需要使用 Switch 组件包装您的路由。所以它可以匹配其中一条路线。您也可以省略 'path="*"。

<Switch>
  <Route exact path="/" component={App}/>
  <Route component={Whoops404}/>
</Switch>