v6版本路由守卫配置

React Router v6 路由守卫配置踩坑记录

最近在将项目从 React Router v5 升级到 v6 时，路由守卫的配置让我头疼不已。v6 版本对路由组件的渲染方式做了重大调整，导致原有的守卫逻辑完全失效。

核心问题

v6 中取消了 Route 组件的 component 属性，改为使用 element 属性来传递组件。这使得原本在 v5 中通过 render 或 component 实现的守卫逻辑无法直接迁移。

解决方案一：自定义 Hook 方式

const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  
  useEffect(() => {
    // 检查用户认证状态
    const checkAuth = async () => {
      const token = localStorage.getItem('token');
      if (token) {
        setIsAuthenticated(true);
      }
    };
    checkAuth();
  }, []);
  
  return isAuthenticated;
};

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  return children;
};

解决方案二：路由配置中直接使用

const App = () => {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route 
        path="/dashboard" 
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
};