React Router v6中如何处理指定路由参数，不符合时返回404？

这里有几种实用的方案来实现你的需求，后续新增类型只需更新合法值列表即可：

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

在对应页面组件中获取路由参数，判断是否在合法列表内，不合法则跳转到404或直接渲染404组件：

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

// 维护合法类型列表，后续新增直接加在这里
const VALID_TYPES = ['music', 'video'];

const TypeContentPage = () => {
  const { type } = useParams();

  // 校验不通过则跳转404
  if (!VALID_TYPES.includes(type)) {
    // 用replace避免历史记录残留无效路由
    return <Navigate to="/404" replace />;
    // 也可以直接渲染404组件：return <NotFoundPage />;
  }

  // 校验通过，渲染对应类型的内容
  return (
    <div>
      <h2>{type} 页面</h2>
      {/* 页面内容 */}
    </div>
  );
};

方案2：封装校验组件实现复用 #

如果多个路由需要类似的参数校验，可以封装一个通用的校验组件，通过Outlet渲染合法路由的内容：

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

const VALID_TYPES = ['music', 'video'];

const ValidTypeGuard = () => {
  const { type } = useParams();
  if (!VALID_TYPES.includes(type)) {
    return <Navigate to="/404" replace />;
  }
  // 校验通过，渲染子路由或当前路由的内容
  return <Outlet />;
};

// 路由配置示例
const routes = [
  {
    path: ':type',
    element: <ValidTypeGuard />,
    children: [
      { path: '', element: <TypeContentPage /> },
      // 可以添加该类型下的子路由
    ],
  },
  { path: '/404', element: <NotFoundPage /> },
];

方案3：使用Loader函数提前拦截（推荐用于需加载数据的场景） #

React Router v6的loader函数会在组件渲染前执行，适合提前校验参数并拦截：

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

const VALID_TYPES = ['music', 'video'];

// 定义loader函数
export const typeRouteLoader = ({ params }) => {
  const { type } = params;
  if (!VALID_TYPES.includes(type)) {
    // 直接重定向到404
    return redirect('/404');
  }
  // 校验通过，可以返回后续组件需要的数据
  return { currentType: type };
};

// 路由配置示例
const routes = [
  {
    path: ':type',
    element: <TypeContentPage />,
    loader: typeRouteLoader,
  },
  { path: '/404', element: <NotFoundPage /> },
];

注意事项 #

• 合法类型列表建议抽成单独的常量文件，方便后续统一维护。
• 使用Navigate时添加replace属性，避免用户点击后退时回到无效路由。
• Loader方式的校验更前置，能避免组件短暂渲染后再跳转的视觉闪烁问题。

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