React Router V6 useRoutes路径正则与参数限制使用问题咨询

首先明确：React Router v6 为了优化路径匹配性能，正式移除了 v4/v5 版本中直接在路由路径后拼接正则规则的语法，因此你之前直接在path中写正则的写法无法生效。

针对你需要的10位数字userid参数匹配需求，可通过以下两种方案实现，完全满足参数不符合规则时不命中对应组件的要求：

方案1：组件内直接校验 #

这是最简便的实现方式，无需额外封装：

1. 路由配置正常写参数规则即可：

const routes = useRoutes([
  { path: '/profile/:userid', element: <Profile /> },
  { path: '*', element: <NotFound /> }
  // 其他路由配置
])

2. 在Profile组件内做参数校验，不匹配直接重定向到404：

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

function Profile() {
  const { userid } = useParams()
  // 校验是否为10位纯数字
  const isUserIdValid = /^\d{10}$/.test(userid)

  // 校验不通过直接返回重定向组件，不会渲染后续业务内容
  if (!isUserIdValid) {
    return <Navigate to="/404" replace />
  }

  // 校验通过后再渲染业务内容
  return <div>当前用户ID：{userid}</div>
}

方案2：封装通用校验组件（适合多路由复用） #

如果有多个路由都需要做参数正则校验，可以封装通用的校验包裹组件，避免重复代码：

1. 封装ParamValidateRoute组件：

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

// 入参说明：paramName为要校验的参数名，regex为校验规则，children为要渲染的路由组件
function ParamValidateRoute({ children, paramName, regex }) {
  const params = useParams()
  const targetParam = params[paramName]
  const isParamValid = regex.test(targetParam)

  return isParamValid ? children : <Navigate to="/404" replace />
}

2. 路由配置时直接包裹对应组件即可：

const routes = useRoutes([
  {
    path: '/profile/:userid',
    element: (
      <ParamValidateRoute paramName="userid" regex={/^\d{10}$/}>
        <Profile />
      </ParamValidateRoute>
    )
  },
  // 你提到的type参数枚举校验也可以直接复用该组件，无需拆分子路由
  {
    path: '/login/:type',
    element: (
      <ParamValidateRoute paramName="type" regex={/^(email|forgot)$/}>
        <Login />
      </ParamValidateRoute>
    )
  },
  { path: '*', element: <NotFound /> }
])

两种方案的最终效果和v4版本中正则路径的效果完全一致，参数不符合规则时不会渲染对应的业务组件。

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