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

Question

我有以下Router定义：

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

我想要任何未映射的路线（即 /foo）重定向回 root /。

我试过<Redirect .../>没有成功。还添加一个<Route />没有path=导致每个页面上的重复组件。

Answer 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>

Answer 2

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

Answer 3

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

\n

// IMPORT\n\nimport {\n  BrowserRouter as Router,\n  Route,\n  Link,\n  Switch,\n  Redirect\n} from "react-router-dom";\n\n---------- \n// USAGE\n\n<Switch>\n  <Route path="/" exact component={Home} />\n  <Redirect from="/old-match" to="/will-match" />\n  <Route path="/will-match" component={WillMatch} />\n  <Route component={NoMatch} />\n</Switch>\n

\n

正如您可以从React Router 文档中看到的那样。

\n

\n

转变

\n

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

\n

这与仅使用一堆 s 有什么不同？

\n

<Switch>其独特之处在于它专门渲染一条路线。相反，每个<Route>与位置匹配的内容都包含在内地渲染。考虑这段代码：

\n

<Route path="/about" component={About}/>\n<Route path="/:user" component={User}/>\n<Route component={NoMatch}/>\n

\n

如果 URL 是 /about，则<About>、<User>和<NoMatch>都会呈现，因为它们都与路径匹配。这是设计使然，允许我们<Route>以多种方式将 s 组合到我们的应用程序中，例如侧边栏和面包屑、引导选项卡等。

\n

然而，有时我们只想选择一个<Route>进行渲染。如果我们\xe2\x80\x99re位于/about，我们不想\xe2\x80\x99也匹配/:user（或显示我们的\xe2\x80\x9c404\xe2\x80\x9d页面）。这里\xe2\x80\x99s如何用Switch来做：

\n

import { Switch, Route } from \'react-router\'\n\n<Switch>\n <Route exact path="/" component={Home}/>\n <Route path="/about" component={About}/>\n <Route path="/:user" component={User}/>\n <Route component={NoMatch}/>\n</Switch>\n

\n

\n