React Router v6 路由异常处理实践

React Router v6 相比 v5 在异常处理机制上有了显著变化，开发者需要重新审视原有的错误边界和路由异常处理方案。

v6 异常处理机制变化

在 v5 中，我们可以通过 Route 组件的 component 属性配合 ErrorBoundary 实现异常捕获。但 v6 中移除了 component 属性，改为使用 element 属性，并且路由配置方式完全重构。

// v5 写法（已废弃）
<Route path="/user/:id" component={UserComponent} />

// v6 写法
<Route path="/user/:id" element={<UserComponent />} />

实际异常处理方案

1. 全局错误边界

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

function Root() {
  const error = useRouteError();
  console.error(error);
  
  return (
    <div>
      <h1>页面出错</h1>
      <p>{error.message}</p>
    </div>
  );
}

// 在路由配置中使用
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />, // 包含错误处理的根组件
    errorElement: <ErrorBoundary />, // 错误边界
    children: [
      { path: "user/:id", element: <UserComponent /> }
    ]
  }
]);

2. 路由级异常处理

function UserComponent() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUser()
      .then(setUser)
      .catch(error => {
        // 手动抛出路由错误
        throw new Error(`获取用户失败: ${error.message}`);
      })
      .finally(() => setLoading(false));
  }, []);
  
  if (loading) return <div>加载中...</div>;
  return <div>{user?.name}</div>;
}

常见问题复现步骤

1. 创建一个带有异步数据获取的组件
2. 在数据获取过程中模拟网络错误
3. 观察 v5 中的错误处理逻辑是否生效
4. 使用 useRouteError() 钩子验证 v6 的异常处理机制

迁移建议

• 建议在项目入口处统一设置全局错误边界
• 为每个路由组件添加适当的错误处理逻辑
• 测试所有异步操作的错误处理路径

v6 的路由异常处理虽然增加了复杂度，但提供了更灵活的错误管理方式，需要开发者根据具体业务场景进行适配。