reactjs - React Router v4 渲染多条路由

Question

我正在创建 SPA，并尝试使用 react-router-dom 包版本 4.1.1 在应用程序中设置路由。

我的路线定义如下:

<BrowserRouter>
  <div>
    <Route exact path="/" component={Login} />
    <Route path="/login" component={Login} />
    <Route path="404" component={NotFound} />
    <Route path="*" component={NotFound} />
  </div>
</BrowserRouter>

基本上，我想设置路由，以便对未定义路由的页面的任何请求都转到 {NotFound} 组件。

如何实现这一目标？ 上面的解决方案在请求 /login 页面时同时呈现 Login 和 NotFound 组件。

亲切的问候

Answer 1

这是来自 official tutorial 的示例、如何避免渲染多条路线

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>