使用react-router-dom Loader实现受保护路由时重定向报错求助

问题场景 #

尝试在react-router-dom中用Loader实现受保护路由，在Route的loader属性中调用工具类的requireAuth()做权限校验，该函数模拟未登录状态（isLoggedIn=false），预期未认证时重定向至/login，但访问/host路径时未正常跳转，反而出现“Unexpected Application Error!”错误。

相关代码 #

requireAuth工具函数

import { redirect } from "react-router-dom"

export async function requireAuth() {
  const isLoggedIn = false
  if (!isLoggedIn) {
      throw redirect("/login")
  }
}

路由配置代码

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  RouterProvider,
  createHashRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";
import Dashboard from './pages/hosts/Dashboard';
import Login from './pages/Login';
import { requireAuth } from './utils';
// 引入自定义错误页面组件
import ErrorPage from './pages/ErrorPage';

const hashRouter = createHashRouter(createRoutesFromElements(
  <Route path='/' element={<Layout />}>
    <Route index element={<Home />} />
    <Route path='login' element={<Login />} />
    <Route path='about' element={<About />} />
    <Route path='vans' 
      element={<Vans />} 
      loader={vansLoader} 
      errorElement={<ErrorPage />}
    />
    <Route 
      path='vans/:id' 
      element={<VanDetail />}
      loader={vanDetailLoader}
      errorElement={<ErrorPage />}
    />
    {/* 为/host父路由添加errorElement，统一处理子路由的错误 */}
    <Route 
      path='host' 
      element={<HostLayout />} 
      errorElement={<ErrorPage />}
    >
      <Route
        index
        element={<Dashboard />}
        loader={async () => await requireAuth()}
      />
      <Route 
        path='income' 
        element={<Income />}  
        loader={async ()=>{ return null }}
      />
      <Route 
        path='reviews' 
        element={<Reviews />}  
        loader={async ()=>{ return null }}
      />
      <Route 
        path='vans'
        element={<HostVans />}  
        loader={hostVansLoader}
      />
      <Route 
        path='vans/:id' 
        element={<HostVansDetail/>} 
        loader={ hostVanDetailLoader}
      >
        <Route 
          index 
          element={<HostVanInfo />}  
          loader={async ()=>{ return null }}
        />
        <Route 
          path='pricing' 
          element={<HostVanPricing />} 
          loader={async ()=>{ return null }} 
        />
        <Route 
          path='photos' 
          element={<HostVanPhotos />}  
          loader={async ()=>{ return null }}
        />
      </Route>
    </Route>
    <Route path='*' element={<PageNotFound />} />
  </Route>
));

function App() {
  return (
    <RouterProvider router={hashRouter} />
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

错误原因 #

React Router中，Loader抛出的redirect需要通过errorElement组件捕获处理。如果路由（或其上层父路由）没有配置errorElement，抛出的redirect会被视为未处理的异常，从而触发全局的“Unexpected Application Error!”提示。

解决步骤 #

• 添加错误边界组件（ErrorPage）：创建一个专门的错误页面组件，用于捕获并处理路由加载时的错误
• 为受保护路由配置errorElement：在/host父路由（或单个受保护子路由）上添加errorElement={<ErrorPage />}，确保Loader抛出的redirect能被正确捕获
• 错误页面内部无需额外处理跳转：React Router会自动识别redirect类型的错误并完成跳转，错误页面仅需负责显示错误信息（可选）

示例ErrorPage组件代码 #

import { useRouteError } from "react-router-dom";

function ErrorPage() {
  const error = useRouteError();
  console.error("路由加载错误:", error);
  
  return (
    <div style={{ padding: "2rem", textAlign: "center" }}>
      <h1>页面加载失败</h1>
      <p>{error.statusText || "发生未知错误"}</p>
    </div>
  );
}

export default ErrorPage;

注意事项 #

• 如果使用createHashRouter，redirect的路径无需额外添加#，React Router会自动适配hash模式
• 可以将errorElement配置在更上层的路由（如根路由），实现全局错误统一处理，但建议为受保护路由单独配置，以便区分不同场景的错误提示

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