只需像这样在底部放置一个重定向并用以下内容包装您的路线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>

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

您需要在<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>

请在所有底部添加默认路由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