20

我正在创建一个 SPA，我正在尝试使用react-router-dompackage version在应用程序中设置路由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

亲切的问候

4

3 回答 3

31

这是官方教程中的一个示例，如何避免渲染多条路线

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>
于 2017-05-16T07:04:15.177 回答
14

使用来渲染路由的第一个匹配项，使用前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>。否则路由匹配and/login并呈现两个路由/login*

但是，当使用 Switch 时，Routes 的顺序很重要，请确保在其他 Routes 之后添加前缀 Routes。例如，'/home' 必须在 Route 顺序中的 '/' 之后，否则，您可以使用exactprop

 <Switch>
    <Route exact path="/" component={Login} />
    <Route path="/home" component={Home} />
  </Switch>
于 2017-05-16T07:06:08.510 回答
0

我认为 NotFound 页面是由于<Route path="*" component={NotFound} />规则而呈现的。路由器的 Path 属性接受path-to-regexp 理解的任何有效 URL 路径。所以'*'表示零个或多个参数匹配

于 2017-05-16T07:07:51.277 回答