Reactjs React路由器v4呈现多条路由

我正在创建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

页面时呈现

登录

和

未找到

组件

亲切问候

这里有一个示例，来自，如何避免渲染多条路线

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>

从'react router'导入{Switch，Route}

使用

开关

来渲染路线的第一个匹配，在使用之前需要导入

开关

import {Switch} from 'react-router';

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

---

我认为NotFound页面是由于

规则而呈现的。路由器的Path属性接受regexp路径理解的任何有效URL路径。So'*'表示零个或多个参数匹配

//默认路由-失败

交换机内部的交换机无法加载默认路由。。在使用交换机内部的交换机时，您知道如何实现默认路由吗？很抱歉设置了格式。我不能在家里美化它comments@NitinKumar

的所有子级都应该是或元素。将仅呈现与当前位置匹配的第一个子项。

根据，因此避免使用嵌套的switchsis不是好的解决方案。当转到/login from/then登录组件卸载和装载时，这对性能不好

 <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/home" component={Home} />
  </Switch>