如何在react-router-dom中正确定义回退路由

时间:2019-06-20 11:19:39

标签: reactjs react-router-dom

我有以下Router定义:

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

我希望任何未映射的路由(即/foo)重定向回到根/

我尝试<Redirect .../>失败。另外添加<Route />而不添加path=会导致每个页面上的组件重复。

4 个答案:

答案 0 :(得分:1)

只需在底部这样放置重定向,然后用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>

答案 1 :(得分:1)

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

答案 2 :(得分:1)

您需要在<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>组合到我们的应用中,例如边栏和面包屑,引导程序标签等。

     

但是,有时我们只选择一个<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>

答案 3 :(得分:0)

请在所有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