如何在react-router-dom中从非标准格式旧URL提取参数并重定向至新路由？

这个问题我之前帮别人处理过，react-router-dom确实不支持在路由的path属性里直接匹配查询参数（也就是?后面的部分），所以你之前的写法行不通。不过我们可以通过一个专门的重定向组件来搞定这件事，步骤很清晰：

1. 创建重定向专用组件 #

这个组件的核心作用就是解析旧URL里的路径参数和查询参数，然后跳转到新的路由地址。我们可以用react-router-dom提供的几个hooks来实现：

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

const RedirectOldConfirmation = () => {
  // 提取旧URL路径里的firstParam（比如/confirmation-xxx里的xxx）
  const { firstParam } = useParams();
  // 获取URL里的查询参数集合
  const [searchParams] = useSearchParams();
  // 用来执行页面跳转的钩子
  const navigate = useNavigate();

  // 从查询参数里取出IDref的值
  const secondParam = searchParams.get('IDref');

  // 先检查参数是否完整，避免无效跳转
  if (firstParam && secondParam) {
    // 跳转到新的路由格式，replace: true会替换浏览器历史记录，防止用户回退时又回到旧URL
    navigate(`/confirmation/${firstParam}/${secondParam}`, { replace: true });
  } else {
    // 如果参数缺失，可以跳转到404页面或者首页，这里示例跳首页
    navigate('/', { replace: true });
  }

  // 重定向组件不需要渲染任何内容
  return null;
};

export default RedirectOldConfirmation;

2. 在路由配置中添加旧路径的匹配规则 #

在App.js的路由配置里，一定要把旧URL的路由规则放在新路由前面（确保它先被匹配到），然后再配置新的确认页面路由：

import { Routes, Route } from 'react-router-dom';
import Confirmation from './components/Confirmation';
import RedirectOldConfirmation from './components/RedirectOldConfirmation';

function App() {
  return (
    <Routes>
      {/* 匹配所有/confirmation-xxx格式的旧URL */}
      <Route path="/confirmation-:firstParam" element={<RedirectOldConfirmation />} />
      {/* 新的确认页面路由 */}
      <Route path="/confirmation/:firstParam/:secondParam" element={<Confirmation />} />
      {/* 其他路由配置... */}
      {/* 404页面路由 */}
      <Route path="*" element={<div>404 - 页面未找到</div>} />
    </Routes>
  );
}

export default App;

为什么原来的写法无效？ #

react-router的path属性只负责匹配URL的路径部分（也就是?之前的内容），查询参数不属于路径匹配的范围，所以你之前写的/confirmation-:firstParam/?IDref=:id是不被识别的，查询参数必须通过useSearchParams或者useLocation来单独提取。

这样设置之后，用户点击旧链接（比如yourdomain.com/confirmation-abc123/?IDref=xyz789）就会自动被重定向到新地址yourdomain.com/confirmation/abc123/xyz789，不会出现404错误啦。

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