从react-router-dom v4升级到v6，如何匹配特定后缀结尾的路径？

React Router DOM v6 完全支持匹配所有以特定后缀结尾的路径，只是写法和 v4 有较大区别，原 v4 的 */AlertWeb 模糊匹配语法已被移除，以下是两种可行的实现方式：

方法一：使用 Catchall 参数匹配（推荐） #

利用 v6 的 Catchall 参数（语法为 :param*，可匹配零或多个 URL 片段），结合精确后缀匹配，直接在路由配置中实现需求：

<Route path="/:prefix*/AlertWeb" element={<YourComponent />} />

这个配置可以同时匹配：

• localhost:3000/AlertWeb（此时 prefix 参数为空）
• localhost:3000/login/AlertWeb（此时 prefix 参数为 login）
• localhost:3000/foo/bar/AlertWeb（此时 prefix 参数为 foo/bar）

方法二：通过路径检测组件实现 #

如果需要更灵活的匹配逻辑（比如复杂正则匹配），可以创建一个中间组件，利用 useLocation 钩子检测路径后缀，再决定是否渲染目标组件：

1. 首先创建检测组件：

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

function AlertWebRoute({ children }) {
  const { pathname } = useLocation();
  // 判断路径是否以 /AlertWeb 结尾
  if (pathname.endsWith('/AlertWeb')) {
    return children;
  }
  // 不匹配时返回 null，让其他路由继续处理
  return null;
}

2. 在路由配置中使用该组件：

<Route path="*" element={
  <AlertWebRoute>
    <YourComponent />
  </AlertWebRoute>
} />

注意：方法二中的 <Route path="*" /> 会匹配所有未被其他路由匹配的路径，所以建议将这个路由放在配置的最后，避免影响其他路由的正常匹配。

内容的提问来源于stack exchange，提问作者Juan Sebastian Prieto Bustaman