React Router v4 渲染多个路由

Posted 2023-02-21

【中文标题】React Router v4 渲染多个路由

【英文标题】：React Router v4 renders multiple routes

【发布时间】：2017-10-15 03:00:09

【问题描述】：

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

亲切的问候

【参考方案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 路径。 所以 '*' 表示零个或多个参数匹配