react-router-dom v6路由守卫

在 react-router-dom v6 中，路由守卫（Route Guards）的实现方式有所改变。v6 中引入了新的 `useNavigate` 钩子函数来处理导航，以及 `<Routes>` 组件来定义路由规则。

要实现路由守卫，你可以使用 `useNavigate` 钩子函数来进行导航，并结合 `<Routes>` 组件的 `element` 属性来定义需要守卫的路由组件。下面是一个简单的示例：

import { useNavigate, Routes, Route } from 'react-router-dom';

// 自定义的路由守卫组件
function PrivateRoute({ element: Element, ...rest }) {
  const navigate = useNavigate();
  const isAuthenticated = /* 判断用户是否已登录的逻辑 */;

  if (!isAuthenticated) {
    // 如果用户未登录，导航到登录页
    navigate('/login');
    return null; // 或返回一个加载中的组件等待重定向
  }

  return <Route {...rest} element={<Element />} />;
}

// 在路由配置中使用路由守卫
function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <PrivateRoute path="/dashboard" element={<DashboardPage />} />
      <Route path="/login" element={<LoginPage />} />
    </Routes>
  );
}

在上面的示例中，我们创建了一个 `PrivateRoute` 组件作为路由守卫，通过判断用户是否已登录来决定是否允许访问受保护的页面。如果用户未登录，则使用 `useNavigate` 钩子函数进行重定向到登录页。

在 `<Routes>` 组件中，我们使用 `<Route>` 定义了几个路由规则，其中包括一个受保护的路由 `/dashboard`，它使用了我们自定义的 `PrivateRoute` 组件来进行路由守卫。

请注意，这只是一个简单示例，实际项目中可能需要更复杂的路由守卫逻辑。你可以根据具体需求来自定义和扩展路由守卫功能。