如何在 react-router-dom 中正确定义后备路由答案

【问题标题】：How to define fallback route properly in react-router-dom如何在 react-router-dom 中正确定义后备路由
【发布时间】：2019-11-03 04:59:33
【问题描述】：

我有以下Router 定义：

<Router>
    <Route exact path='/' component={Home}/>
    <Route path='/about' component={About}/>
    <Route path='/code' component={Code}/>
</Router>

我希望任何未映射的路由（即/foo）重定向回根/。

我尝试了<Redirect .../>，但没有成功。此外，在没有 path= 的情况下添加 <Route /> 会导致每个页面上出现重复的组件。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

请在所有Routes的底部添加默认路由（添加from属性重定向）

<Router>
    <Route exact path='/' component={Home}/>
    <Route path='/about' component={About}/>
    <Route path='/code' component={Code}/>
    <Redirect from="/" />
</Router>

工作链接https://stackblitz.com/edit/react-st9nug?file=index.js

【讨论】：

这不起作用，如果我将此重定向添加到，例如，about。当我尝试直接访问 <address>/code 时，我也被重定向了。

【解决方案2】：

只需像这样在底部放置一个重定向，然后用 Switch 包装你的路线：

<Router>
    <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/about' component={About}/>
        <Route path='/code' component={Code}/>

        // Redirect all 404's to home
        <Redirect to='/' />
    </Switch>
</Router>

【讨论】：

【解决方案3】：

<Router>
    <Switch>
        // ...your routes and then
        <Route path="*" render={() => <Redirect to="/" />}
    </Switch>
</Router>

【讨论】：

【解决方案4】：

您需要在 <Switch> 组件中执行此操作。

// IMPORT

import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect
} from "react-router-dom";

---------- 
// USAGE

<Switch>
  <Route path="/" exact component={Home} />
  <Redirect from="/old-match" to="/will-match" />
  <Route path="/will-match" component={WillMatch} />
  <Route component={NoMatch} />
</Switch>

正如您从React Router Docs 看到的那样。

切换

渲染与位置匹配的第一个子 <Route> 或 <Redirect>。

这与只使用一堆 s 有何不同？

<Switch> 的独特之处在于它专门呈现一条路线。相比之下，与该位置匹配的每个 <Route> 都会以包容性方式呈现。考虑这段代码：
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
如果 URL 是 /about，那么 <About>、<User> 和 <NoMatch> 将全部呈现，因为它们都与路径匹配。这是设计使然，允许我们以多种方式将<Route>s 组合到我们的应用程序中，例如侧边栏和面包屑、引导选项卡等。

然而，有时我们只想选择一个<Route> 进行渲染。如果我们在 /about 我们不想也匹配 /:user （或显示我们的“404”页面）。以下是使用 Switch 的方法：
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>

【讨论】：