如何使用React Router v6限制URL参数为指定值集合？

问题原因 #

你之前尝试的路由写法path=":category('shoes'|'jeans'|'sweaters')"存在语法错误，多了不必要的单引号，导致所有参数都无法匹配该路由，最终触发最外层的通配符路由重定向到根路径。

可行解决办法 #

方法1：修正路由正则匹配（适合静态固定分类）

React Router v6支持在路径参数中添加正则约束，正确写法不需要单引号。同时要在/shop路由下添加一个子通配符路由，处理非法分类的跳转：

<Routes>  
  <Route path="*" element={<Navigate to="/" />} />
  <Route path="/" element={<HomePage />} />
  <Route path="/shop">
    <Route index element={<ShopPage />} />
    {/* 正确的正则约束写法 */}
    <Route path=":category(shoes|jeans|sweaters)" element={<CategoryPage />} />
    {/* 处理/shop下的非法路径，重定向到店铺首页 */}
    <Route path="*" element={<Navigate to="/shop" replace />} />
  </Route>
</Routes>

这种方式直接在路由层面拦截，只有匹配指定分类的路径才会渲染CategoryPage，其他非法路径会被重定向到店铺首页。

方法2：使用Loader函数（适合React Router v6.4+，支持动态校验）

如果你的分类是从API获取的动态数据，推荐用路由的loader函数提前校验参数，配合errorElement处理错误：

// 定义合法分类（可从API获取后缓存）
const validCategories = ['shoes', 'jeans', 'sweaters'];

// 路由Loader函数
function categoryLoader({ params }) {
  if (!validCategories.includes(params.category)) {
    // 抛出404错误，触发errorElement渲染
    throw new Response("", { status: 404 });
  }
  // 这里可以返回分类数据，供组件通过useLoaderData获取
  return null;
}

// 路由配置
<Routes>  
  <Route path="*" element={<Navigate to="/" />} />
  <Route path="/" element={<HomePage />} />
  <Route path="/shop">
    <Route index element={<ShopPage />} />
    <Route 
      path=":category" 
      element={<CategoryPage />} 
      loader={categoryLoader}
      errorElement={<div>分类不存在，<Link to="/shop">返回店铺</Link></div>}
    />
  </Route>
</Routes>

这种方式能在组件渲染前完成参数校验，非法参数会直接显示错误内容，不会进入CategoryPage内部。

方法3：封装路由守卫组件（灵活通用）

如果不想用数据API，可以封装一个守卫组件，在组件层面提前校验参数：

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

function CategoryGuard() {
  const { category } = useParams();
  const validCategories = ['shoes', 'jeans', 'sweaters'];

  // 校验不通过则重定向
  if (!validCategories.includes(category)) {
    return <Navigate to="/shop" replace />;
  }

  // 校验通过则渲染目标组件
  return <CategoryPage />;
}

// 路由配置
<Routes>  
  <Route path="*" element={<Navigate to="/" />} />
  <Route path="/" element={<HomePage />} />
  <Route path="/shop">
    <Route index element={<ShopPage />} />
    <Route path=":category" element={<CategoryGuard />} />
  </Route>
</Routes>

这种方式代码简单直观，适合不需要复杂数据加载的场景。

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