我正在创建一个 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和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>
利用Switch渲染路由的第一个匹配，Switch使用前需要导入
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>
根据文档
<Switch>它的独特之处在于它专门呈现一条路线。相比之下，每个<Route>匹配位置的都包含渲染。现在，如果我们在
/login，<Switch>将开始寻找匹配的<Route>.<Route path="/login"/>将匹配<Switch>并将停止寻找匹配和渲染<Login>。否则路由/login与/login和匹配*并呈现两个路由
但是，在使用 Switch 时，Routes 的顺序很重要，请确保在其他 Routes 之后添加前缀 Routes。例如，'/home' 必须在 Route 顺序中的 '/' 之后，否则，您可以使用exactprops
<Switch>
<Route exact path="/" component={Login} />
<Route path="/home" component={Home} />
</Switch>
我认为 NotFound 页面是由于<Route path="*" component={NotFound} />规则而呈现的。路由器的 Path 属性接受path-to-regexp 理解的任何有效 URL 路径。所以'*'意味着零个或多个参数匹配