v6路由异常捕获

在React Router v6的升级过程中，路由异常捕获成为了一个重要议题。v6版本移除了v5中的<Switch>组件，改用<Routes>，同时路由匹配机制也发生了变化，这导致原有的异常处理逻辑需要重新设计。

问题现象

当路由路径不匹配或组件渲染出错时，v6默认不会捕获这些异常。例如，在以下代码中：

<Routes>
  <Route path="/user/:id" element={<UserProfile />} />
  <Route path="/admin" element={<AdminPanel />} />
</Routes>

当访问/user/abc时，如果UserProfile组件内部出现错误，异常不会被正确捕获。

解决方案

1. 使用useErrorBoundary钩子：

import { useErrorBoundary } from 'react-router-dom';

function UserProfile() {
  const error = useErrorBoundary();
  if (error) {
    return <div>页面加载失败</div>;
  }
  // 正常渲染逻辑
}

2. 创建自定义错误边界组件：

function ErrorBoundary() {
  const error = useRouteError();
  return (
    <div>
      <h1>出错了！</h1>
      <p>{error.message}</p>
    </div>
  );
}

<Routes>
  <Route path="/user/:id" element={<UserProfile />} />
  <Route path="*" element={<ErrorBoundary />} />
</Routes>

实践建议

建议在应用根路由层设置全局错误边界，确保用户不会看到白屏或崩溃页面。同时要注意异常信息的友好性，避免暴露敏感的系统信息。