如何使用react-router-dom结合自定义正则验证UUID格式的URL？

你的问题出在路径参数的正则写法错误，而且react-router-dom的v5和v6版本对参数正则的支持逻辑不一样，下面分版本给你解决方法：

针对react-router-dom v5 #

v5支持在路径参数里直接嵌入正则，写法是:paramName(正则内容)，注意几个关键点：

• 不需要加正则的/包裹和/i这种修饰符，不区分大小写可以用(?i)前缀
• 不用写^和$，路由会自动匹配参数的整个分段

正确的UUID验证路由写法：

<Route 
  path="/to/page/:path((?i)[0-9A-F]{8}-[0-9A-F]{4}-[5][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12})" 
  component={MyPage} 
/>

这个正则会匹配大小写不敏感的UUID格式，只有参数符合时才会渲染MyPage，否则会匹配其他路由（比如错误页路由）。

针对react-router-dom v6 #

v6移除了路径参数中嵌入正则的功能，需要在组件内部或者路由的loader函数中做验证：

方法1：组件内验证跳转 #

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

const MyPage = () => {
  const { path } = useParams();
  // 这里用你原来的正则即可
  const isValidUuid = /^[0-9A-F]{8}-[0-9A-F]{4}-[5][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i.test(path);

  if (!isValidUuid) {
    // 不符合就跳错误页
    return <Navigate to="/error" replace />;
  }

  // 正常渲染页面内容
  return <div>UUID验证通过，页面内容</div>;
};

// 路由配置不用加正则
<Route path="/to/page/:path" element={<MyPage />} />

方法2：用loader函数提前验证（数据路由模式） #

如果用v6的createBrowserRouter数据路由，可以在loader里提前校验，避免渲染组件：

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

const uuidRegex = /^[0-9A-F]{8}-[0-9A-F]{4}-[5][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;

const myPageLoader = ({ params }) => {
  if (!uuidRegex.test(params.path)) {
    return Navigate({ to: "/error", replace: true });
  }
  // 返回页面需要的数据
  return { uuid: params.path };
};

const router = createBrowserRouter([
  {
    path: "/to/page/:path",
    element: <MyPage />,
    loader: myPageLoader,
  },
]);

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