react-router-dom v6 路由守卫 异步请求处理

在 React Router v6 中，路由守卫的概念已经发生了变化。以前的 `Route` 组件被拆分为 `Match` 和 `Outlet` 组件，路由守卫可以直接在 `Match` 组件中进行配置。

要处理异步请求，可以使用 `useEffect` 钩子函数来触发异步操作，并根据返回结果决定是否放行或重定向。

下面是一个示例，展示了如何在异步请求处理中使用路由守卫：

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

function PrivateRoute({ children }) {
  const match = useMatch();
  const navigate = useNavigate();
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    // 模拟异步请求
    setTimeout(() => {
      const isAuthenticated = checkAuthentication(); // 检查用户是否已登录
      setIsAuthenticated(isAuthenticated);
    }, 1000);
  }, []);

  if (!isAuthenticated) {
    navigate('/login'); // 重定向到登录页面
    return null;
  }

  return <>{children}</>;
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <PrivateRoute>
        <p>This is a private route.</p>
      </PrivateRoute>
    </div>
  );
}

在上面的代码中，`PrivateRoute` 组件会通过 `setTimeout` 模拟一个异步请求。在请求返回后，会根据用户是否已登录决定是否放行或重定向到登录页面。