React中如何将未匹配的路由路径自动重定向到首页？

你当前使用的是React Router v5版本，按以下步骤操作即可实现需求：

1. 先在路由文件头部引入Redirect组件：

import { Redirect } from 'react-router-dom';

2. 在<Switch>组件内部所有已配置的<Route>规则的最后，添加兜底重定向规则：

<Redirect to="/" />

修改后的完整路由配置如下：

<Router>
    <Switch>
      <Route path='/' component={Home} exact />
      <Route path='/xyz' component={asf} exact />
      <Route path='/asd' component={asd} exact />
      <Route path='/fasd/:slug' component={asd} exact />
      <Route path='/asd' component={asd} exact />
      <Route path='/asd/:slug' component={asd} exact />
      <Route path='/asd' component={asd} exact />
      <Route path='/asd' component={fas} exact />
      <Route path='/asd' component={fasd} exact />
      {/* 兜底重定向规则 */}
      <Redirect to="/" />
    </Switch>
</Router>

实现原理 #

Switch组件的特性是从上到下匹配路由规则，命中第一个符合条件的规则后就会停止匹配。当访问未声明的路径时，前面所有指定path的Route都匹配失败，就会命中最后这条无path限制的Redirect规则，自动重定向到首页路径/。

如果后续升级到React Router v6版本，对应写法调整为：

• 用Routes替代Switch，用Navigate替代Redirect
• 兜底规则写为：<Route path="*" element={<Navigate to="/" replace />}

内容的提问来源于stack exchange，提问作者Oğuzhan