React Router V6实现路由守卫

React Router V6中实现路由守卫可以通过使用`useRoutes`钩子函数和`useNavigate`钩子函数来实现。

首先，在App.js中定义需要保护的路由，如下所示：

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

import Home from './pages/Home';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';

function App() {
  const routes = useRoutes([
    {
      path: '/',
      element: <Home />,
    },
    {
      path: '/login',
      element: <Login />,
    },
    {
      path: '/dashboard',
      element: <Dashboard />,
      canActivate: () => {
        // 判断用户是否已经登录
        const isAuthenticated = localStorage.getItem('isAuthenticated');
        return isAuthenticated ? true : <Navigate to="/login" />;
      },
    },
  ]);

  return routes;
}

在定义路由时，可以添加`canActivate`函数来实现路由守卫。`canActivate`函数会在路由被访问时自动调用，可以在该函数中判断用户是否已经登录并返回`true`或`false`，如果返回`false`则该路由不会被访问，如果返回`<Navigate to="/login" />`则会自动跳转到登录页面。

接下来，在登录页面中，当用户登录成功时，可以将用户登录状态保存到LocalStorage中：

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 登录成功后将用户登录状态保存到LocalStorage中
    localStorage.setItem('isAuthenticated', 'true');
    navigate('/dashboard');
  };

  return (
    <div>
      <h1>Login</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

当用户点击登录按钮时，可以将用户登录状态保存到LocalStorage中并跳转到Dashboard页面。

最后，在Dashboard页面中，可以使用`useEffect`钩子函数和`useNavigate`钩子函数来实现退出登录功能：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

function Dashboard() {
  const navigate = useNavigate();

  useEffect(() => {
    const handleLogout = () => {
      // 清除LocalStorage中的用户登录状态并跳转到登录页面
      localStorage.removeItem('isAuthenticated');
      navigate('/login');
    };
    document.addEventListener('keydown', handleLogout);
    return () => {
      document.removeEventListener('keydown', handleLogout);
    };
  }, [navigate]);

  return (
    <div>
      <h1>Dashboard</h1>
    </div>
  );
}

在Dashboard页面中，可以使用`useEffect`钩子函数来监听键盘事件，当用户按下`Esc`键时，可以清除LocalStorage中的用户登录状态并跳转到登录页面。