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

Posted 2023-02-22

【中文标题】如何在 react-router-dom 中正确定义后备路由

【英文标题】：How to define fallback route properly in 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 /> 会导致每个页面上出现重复的组件。

【参考方案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>