React-Router v6手动输入路由跳转404问题求助

直接手动输入URL访问/characters/:name路由时，React Router不会携带Link组件传递的state参数，此时useLocation().state为undefined，导致校验逻辑误判参数非法，触发404跳转；而通过Link点击跳转时state正常携带，所以逻辑运行正常。

不要依赖state传递校验用的有效角色列表，改用以下两种可靠方案：

方案一：组件内直接获取数据源校验 #

如果角色数据是全局可访问的（静态数据、状态管理库或API请求结果），直接在CharacterCard组件内获取并校验：

import { useParams, Navigate } from "react-router-dom";
// 示例静态数据源，可替换为实际数据获取逻辑
const validCharacterNames = ["mario", "luigi", "peach"];

function CharacterCard() {
  const { name } = useParams();

  // 校验路由参数合法性
  if (!validCharacterNames.includes(name)) {
    return <Navigate to="/404" replace />;
  }

  return (
    <div className="character-card">
      <h2>角色：{name}</h2>
      {/* 组件其余渲染内容 */}
    </div>
  );
}

方案二：使用路由Loader预校验（React Router v6+推荐） #

利用React Router的路由Loader功能，在组件渲染前完成参数校验，逻辑更统一：

1. 定义Loader函数：

// 示例角色数据源
const validCharacterNames = ["mario", "luigi", "peach"];

export const characterLoader = ({ params }) => {
  // 校验参数合法性，非法则抛出404响应
  if (!validCharacterNames.includes(params.name)) {
    throw new Response("Not Found", { status: 404 });
  }
  // 可同时返回角色数据供组件使用
  return { characterName: params.name };
};

2. 更新路由配置：

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import CharacterCard from "./CharacterCard";
import { characterLoader } from "./loaders";

const router = createBrowserRouter([
  // 其他路由配置...
  {
    path: "/characters/:name",
    element: <CharacterCard />,
    loader: characterLoader,
    errorElement: <div>404 - 该角色不存在</div>,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

这样无论通过Link跳转还是手动输入URL，都会先执行Loader的校验逻辑，非法参数直接触发错误页面，彻底解决场景不一致的问题。

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