React Router v4 渲染多个路由答案

【问题标题】：React Router v4 renders multiple routesReact Router v4 渲染多个路由
【发布时间】：2018-10-18 14:19:59
【问题描述】：

我正在创建一个 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 组件。

亲切的问候

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案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>

【讨论】：

<Switch> <Route exact path="/" component={Home} /> <Switch> <Route exact path="/child" component={Child} /> </Switch> // Default Route - FAILS <Route path="*" Component={NotFound404} /> </Switch> Switch 内部的 Switch 无法加载默认路由。关于在 switch 内部使用 switch 时如何实现默认路由有什么想法吗？
抱歉格式化。我无法在cmets中美化它
@NitinKumar All children of a <Switch> should be <Route> or <Redirect> elements. Only the first child to match the current location will be rendered. 根据official docs，所以避免使用嵌套开关

【解决方案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 时，路由的顺序很重要，请确保在其他路由之后添加前缀 Routes。例如'/home' 必须在 Route 顺序中的 '/' 之后，否则，您可以使用 exact 属性

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

【讨论】：

不是很好的解决方案。当从/转到/login然后登录组件卸载并挂载，对性能不好

【解决方案3】：

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

【讨论】：