React Router v4渲染多个路由

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页面时同时渲染了Login和NotFound组件。

顺颂时祺

- Complexity

Answer 1

这里有一个来自官方教程的例子，展示如何避免渲染多个路由。

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>

- Taras Yaremkiv

---

<Switch> <Route exact path="/" component={Home} /> <Switch> <Route exact path="/child" component={Child} /> </Switch> // 默认路由 - 失败 <Route path="*" Component={NotFound404} /> </Switch> Switch内部的Switch无法加载默认路由。有没有办法在使用Switch内部的Switch时实现默认路由？ - Nitin Kumar

抱歉格式不好看，我无法在评论中美化它。 - Nitin Kumar

@NitinKumar <Switch>的所有子元素都应该是<Route>或<Redirect>元素。只有第一个与当前位置匹配的子元素将被渲染。 根据官方文档，因此请避免使用嵌套的switches。 - Taras Yaremkiv

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>

根据文档，<Switch> 的独特之处在于它只呈现一个路由。相比之下，每个与位置匹配的 <Route> 都是包容性的呈现。

现在，如果我们在 /login 页面，<Switch> 将开始寻找匹配的 <Route>。 <Route path="/login"/> 将匹配并且 <Switch> 将停止寻找匹配并呈现 <Login>。否则，路由将使用 /login 与 /login 和 * 进行匹配并呈现两个路由。

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

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

- Shubham Khatri

---

这不是一个好的解决方案。当从 / 跳转到 /login 时，Login 组件会被卸载和重新挂载，这对性能不利。 - Mohmmad Ebrahimi Aval

Answer 3

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

- Serg