react-router-dom v6 路由守卫

在 React Router DOM v6 中，路由守卫的概念已经被移除。相反，v6 引入了一个新的 API：`Routes` 组件，该组件用于定义路由和对应的组件。你可以在需要进行权限控制的组件中使用条件渲染来实现路由守卫的效果。

下面是一个示例，展示如何在特定条件下进行路由重定向：

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

function App() {
  const isAuthenticated = ...; // 根据实际情况设置是否已认证

  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/dashboard" element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />} />
    </Routes>
  );
}

在上述示例中，`isAuthenticated` 变量表示用户是否已认证。如果用户已认证，则会渲染 `<Dashboard />` 组件；如果用户未认证，则会重定向到 `/login` 路由。