react router v6路由守卫

React Router v6 路由守卫是一种机制，用于在用户访问某个路由之前，对其进行权限验证或其他操作。它可以帮助开发者控制用户访问路由的流程，以及在必要时进行重定向或其他操作。在 React Router v6 中，路由守卫可以通过使用 `<Routes>` 组件和 `useNavigate` 钩子来实现。开发者可以在 `<Routes>` 组件中使用 `element` 属性来定义需要进行权限验证的路由，并在 `useNavigate` 钩子中进行路由跳转或其他操作。

相关问题

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中的用户登录状态并跳转到登录页面。

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` 路由。