React Router 6中errorElement无法渲染自定义错误组件问题

你的errorElement仅负责处理/feed路由及其子路由在渲染过程中抛出的错误（比如组件内部报错），而非处理未匹配的路由（如/feed/xxx或/abc这类不存在的路径）。当根路径改为/feed后，访问未定义的路径时，Router找不到对应路由规则，就会显示默认错误页。

方法1：添加通配符路由处理404 #

在路由数组中新增一个通配符路由，专门匹配所有未被定义的路径，渲染你的自定义错误组件：

const router = createBrowserRouter([
  {
    path: "/feed",
    element: <App />,
    errorElement: <ErrorPage />, // 处理/feed下的渲染错误
    children: [
      {
        index: true,
        element: <Feed />,
      },
      {
        path: "login", // 子路由无需重复父路径，自动匹配/feed/login
        element: <Login />,
      },
    ],
  },
  // 通配符路由，捕获所有未匹配路径
  {
    path: "*",
    element: <ErrorPage />,
  },
]);

方法2：调整路由结构统一错误处理 #

如果你的应用以/feed为核心路径，可以将主路由设为/，把/feed作为子路由，让全局错误处理更统一：

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "feed",
        children: [
          {
            index: true,
            element: <Feed />,
          },
          {
            path: "login",
            element: <Login />,
          },
        ],
      },
      // 通配符路由处理404
      {
        path: "*",
        element: <ErrorPage />,
      },
    ],
  },
]);

处理未匹配路由时，useRouteError()返回的错误对象可能没有status或statusText属性，建议给ErrorPage加兜底逻辑避免报错：

const ErrorPage = () => {
  const error = useRouteError();
  
  const status = error?.status || 404;
  const statusText = error?.statusText || "页面未找到";

  return (
    <div className='w-full h-screen flex flex-col items-center mt-28'>
      <h1 className='text-8xl text-neutral-grayish-blue'>Error <span className='text-8xl text-primary-soft-red'>{status}</span></h1>
      <p className='text-4xl text-neutral-grayish-blue my-10'>{statusText}</p>
      <Link to={'/feed'} className='p-2 bg-neutral-dark-blue text-neutral-white rounded-md'>Back Home</Link>
    </div>
  );
};

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