React Router中移除根文件夹自动重定向所有匹配路径

问题描述 #

我正在使用react-router-dom 6.3.0，需要将所有以animals/为前缀的旧路由自动重定向到移除该前缀的新路由：

旧路由示例：

<Route path='animals/dog' element={<Dog />} />
<Route path='animals/cat' element={<Cat />} />
<Route path='animals/bird/songs' element={<BirdSongs />} />

期望重定向到的新路由：

<Route path='dog' element={<Dog />} />
<Route path='cat' element={<Cat />} />
<Route path='bird/songs' element={<BirdSongs />} />

要求无需为每个路由手动编写重定向规则，且必须在React Router内部实现，不能使用.htaccess或301重定向。

解决方案 #

完全可以通过React Router的通配符路由实现批量重定向，不用逐个写规则，下面是两种简单的实现方式：

方式1：直接用Navigate组件（最简洁） #

在路由配置里添加一个匹配animals/*的通配符路由，利用Navigate组件自动提取前缀后的路径并跳转：

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 先配置你的新路由 */}
      <Route path='dog' element={<Dog />} />
      <Route path='cat' element={<Cat />} />
      <Route path='bird/songs' element={<BirdSongs />} />

      {/* 批量处理旧路由重定向 */}
      <Route 
        path='animals/*' 
        element={<Navigate to='/*' replace />} 
      />
    </Routes>
  );
}

• path='animals/*'会匹配所有以animals/开头的路径，不管后面跟着什么内容；
• to='/*'会自动把animals/之后的路径片段保留，跳转到对应的新路径（比如animals/dog会跳转到dog）；
• replace属性用来替换浏览器历史记录，避免用户点返回时回到旧的animals/xxx路径。

方式2：自定义重定向组件（适合复杂场景） #

如果之后需要对路径做额外处理（比如参数转换），可以写个自定义组件来处理：

import { useParams, useNavigate, useEffect } from 'react-router-dom';

function AnimalsRedirect() {
  // 提取animals/之后的所有路径内容
  const { '*': restPath } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    // 跳转到移除前缀后的路径，replace替换历史记录
    navigate(`/${restPath}`, { replace: true });
  }, [navigate, restPath]);

  return null;
}

// 路由配置中使用这个组件：
<Route path='animals/*' element={<AnimalsRedirect />} />

注意事项 #

• 重定向路由和新路由的顺序不影响（两者路径规则无冲突），但习惯上把重定向路由放在所有业务路由后面，避免误拦截其他路由；
• React Router无法发送HTTP 301状态码（这需要后端支持），但如果只是前端路由跳转，上面的方案完全满足需求。

内容的提问来源于stack exchange，提问作者Clifton Labrum