路由错误处理：v6实现方法

在React Router v6中实现路由错误处理是升级过程中的重要环节。相比v5，v6采用了全新的错误边界机制来处理路由错误。

基本错误处理

使用useRoutes和errorElement属性来定义错误边界：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />, // 主应用组件
    errorElement: <ErrorBoundary />, // 错误边界组件
    children: [
      {
        index: true,
        element: <Home />
      }
    ]
  }
]);

function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div>
      <h1>页面出错啦！</h1>
      <p>{error.message}</p>
      <button onClick={() => window.location.reload()}>重新加载</button>
    </div>
  );
}

自定义错误处理逻辑

可以结合useNavigate进行自定义重定向：

function CustomErrorBoundary() {
  const navigate = useNavigate();
  const error = useRouteError();
  
  useEffect(() => {
    // 记录错误日志
    console.error('路由错误:', error);
    
    // 根据错误类型重定向
    if (error.status === 404) {
      navigate('/not-found');
    } else {
      navigate('/error');
    }
  }, [error]);
  
  return <div>错误处理中...</div>;
}

实际部署建议

1. 在生产环境添加全局错误捕获
2. 使用useErrorBoundary钩子处理特定路由
3. 集成错误监控服务如Sentry

这种实现方式比v5的Switch配合component更加灵活和直观。