React Router v6 路由守卫：强悍实用，提升开发效率！

前端

2023-07-01 19:42:18

React Router v6 路由守卫：助您构建强大的单页应用

在 React Router v6 的精彩世界中，路由守卫得到了全面升级，为开发者带来了更强大的功能和更高的灵活性。在这篇博文中，我们将探索 React Router v6 路由守卫的各种类型、它们的用途以及如何将它们应用到您的项目中。

路由守卫的分类

React Router v6 路由守卫主要分为三类：权限控制、导航守卫和路由拦截器。

权限控制路由守卫： 确保只有具有适当权限的用户才能访问特定页面或功能。
导航守卫路由守卫： 在用户进入或离开页面时执行操作，例如显示确认对话框或重定向到其他页面。
路由拦截器路由守卫： 在路由匹配或离开之前执行全局操作，例如记录用户访问历史或处理错误。

权限控制路由守卫

权限控制路由守卫是确保您的应用安全可靠的重要工具。它们允许您根据用户的角色或其他因素限制对特定页面的访问。例如，您可以使用权限控制路由守卫来保护敏感数据、限制对管理功能的访问或创建多租户应用程序。

import { AuthContext } from './AuthContext';
import { useMemo } from 'react';
import { Route, Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children, ...rest }) => {
  const auth = useMemo(() => useAuth(), []);

  return (
    <Route
      {...rest}
      render={({ location }) =>
        auth.isAuthenticated ? (
          children
        ) : (
          <Navigate to="/login" state={{ from: location }} />
        )
      }
    />
  );
};

导航守卫路由守卫

导航守卫路由守卫为控制用户在应用中如何导航提供了强大的机制。您可以使用它们来验证用户输入、防止意外页面离开或执行异步操作，例如加载数据。

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

const NavigationGuard = () => {
  const navigate = useNavigate();

  const handleLeave = (e) => {
    if (window.confirm('Are you sure you want to leave this page?')) {
      navigate(-1);
    } else {
      e.preventDefault();
    }
  };

  return (
    <Route
      render={({ location, ...rest }) => (
        <Route {...rest} onBeforeunload={handleLeave} />
      )}
    />
  );
};

路由拦截器路由守卫

路由拦截器路由守卫允许您在路由匹配或离开之前执行全局操作。它们非常适合跟踪用户访问历史、处理错误或监控页面性能。

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

const RouteLogger = () => {
  const [history, setHistory] = useState([]);
  const location = useLocation();

  useEffect(() => {
    const newHistory = [...history, location.pathname];
    setHistory(newHistory);
  }, [location, history]);

  return null;
};