React Router v6 ErrorHandling 失效：我的代码遗漏了什么？

核心问题 #

1. 路由结构错误：login作为/v3的子路由，导致访问/v3/login时会先渲染AppLayer，而AppLayer里的登录验证会强制跳转回/v3/login，形成无限循环；同时直接使用window.location.href会绕过React Router的机制，无法触发错误捕获。
2. 错误捕获范围不匹配：React Router的errorElement只能捕获其所在路由子组件树中的渲染/数据加载错误，若AppLayer自身抛出错误（比如AuthHelpers.is_user_login()报错），当前的errorElement无法捕获，因为它属于同一层级的路由配置。
3. 同步渲染逻辑的问题：AppLayer中的登录验证是同步渲染逻辑，若这里抛出错误，会直接导致组件渲染崩溃，且无法被错误边界捕获（错误边界无法捕获自身同步渲染的错误）。

修复步骤 #

1. 调整路由结构，分离登录路由 #

将login路由从/v3的子路由中移出，避免访问登录页时触发AppLayer的验证逻辑：

// AppLayout 代码修改
import ErrorHandling from "./ErrorHandling"

export default memo(function AppLayout() {
  const location = useLocation()
  return (
    <>
      <Toaster />
      <AnimatePresence mode="wait" initial={false}>
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<AppLayer><Navigate to="/v3/dashboard" /></AppLayer>}/>
          <Route path="/v3/" element={<AppLayer><Navigate to="/v3/dashboard" /></AppLayer>}/>
          {/* 单独设置登录路由，不经过AppLayer */}
          <Route path="/v3/login" element={<Login />} />
          {/* 受保护的路由组，使用errorElement */}
          <Route path="/v3" element={<AppLayer />} errorElement={<ErrorHandling/>}>
            <Route path="dashboard" element={<Dashboard />} />
            {/* 其他需要登录的子路由 */}
          </Route>
        </Routes>
      </AnimatePresence>
    </>
  )
})

2. 替换window.location.href为React Router导航方式 #

在AppLayer中使用useNavigate钩子进行跳转，避免绕过路由机制：

// AppLayer 代码修改
import { useNavigate, Outlet, useEffect } from "react-router-dom"
export const dashboardContext = createContext()

export default function AppLayer({children}) {
  const navigate = useNavigate()
  const [data, setData] = useState(false)

  // 用useEffect执行登录验证，避免同步渲染逻辑导致的问题
  useEffect(() => {
    if (!AuthHelpers.is_user_login()) {
      navigate("/v3/login", { replace: true })
    }
  }, [navigate])

  // 如果未登录，返回null或者加载状态，避免渲染后续组件
  if (!AuthHelpers.is_user_login()) {
    return null
  }

  return (
    <dashboardContext.Provider value={{data, setData}}>
      <AppData>
        <Outlet />
      </AppData>
    </dashboardContext.Provider>
  )
}

3. 确保错误能被错误边界捕获 #

将可能抛出错误的逻辑包裹在try/catch中，或者放在useEffect里（错误边界能捕获 useEffect 中的异步错误），同时确保errorElement所在的路由层级能覆盖到错误发生的组件。比如AppData或子路由组件抛出错误时，/v3路由的errorElement就能捕获到。

4. 错误处理组件优化（可选） #

可以在ErrorHandling组件中显示具体错误信息：

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

export default function ErrorHandling() {
  const error = useRouteError()
  console.error("路由错误:", error)
  return (
    <div className="text-center w-screen h-screen flex flex-col items-center justify-center text-neutral-70">
      <h1 className="text-4xl">Error!</h1>
      <p className="text-xl">Something's Wrong.</p>
      <p className="mt-4 text-sm text-gray-500">
        {error.statusText || error.message}
      </p>
    </div>
  )
}

关键说明 #

• React Router的errorElement基于React错误边界实现，只能捕获子组件树中的错误，无法捕获自身组件的同步渲染错误。
• 避免在组件同步渲染阶段执行可能抛出错误的逻辑，尽量放在useEffect或异步操作中，这样错误才能被错误边界捕获。
• 登录验证逻辑应使用React Router的导航API，而非直接修改window.location.href，否则会绕过路由系统的错误处理和状态管理。

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