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页面时，上述解决方案会呈现NotFound和/login组件。

亲切的问候

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>

Answer 2

利用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>

根据 docs

<Switch>的独特之处在于它专门呈现路线。在   相比之下，每个匹配位置的<Route>都会呈现   包含边界。

现在，如果我们在/login，<Switch>将开始寻找   匹配<Route>。 <Route path="/login"/>将与<Switch>匹配   将停止寻找匹配并呈现<Login>。否则路线   将/login与/login和*匹配，然后展示两条路线

但是，使用Switch时，路由顺序很重要，请确保在其他路由后添加前缀路由。对于例如'/ home'必须在路线顺序中的'/'之后，否则，您可以使用exact道具

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

Answer 3

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

React Router v4呈现多条路线

3 个答案: