React-router6实现全局路由守卫

React-router6中实现全局路由守卫可以通过使用`Routes`组件及其子组件的`element`属性实现。

首先，在顶层组件中使用`Routes`组件来定义所有的路由，并在需要进行路由守卫的路由组件中添加`element`属性，该属性为一个函数，用于在路由跳转前进行判断。

例如，我们可以在`Routes`组件中定义一个需要进行路由守卫的路由：

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

const PrivateRoute = ({ element, ...rest }) => {
  const navigate = useNavigate();
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  if (isLoggedIn) {
    return <Route {...rest} element={element} />;
  } else {
    navigate('/login');
    return null;
  }
};

const App = () => {
  return (
    <Routes>
      <PrivateRoute path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  );
};

在上述代码中，我们定义了一个名为`PrivateRoute`的组件，该组件接受一个`element`属性，该属性为一个函数，用于在路由跳转前进行判断。该组件首先从`localStorage`中获取用户登录状态，如果用户已登录，则返回一个带有`element`属性的`Route`组件；如果用户未登录，则使用`useNavigate`钩子将路由导航至登录页面，并返回`null`。

在`App`组件中，我们使用`Routes`组件来定义所有的路由。对于需要进行路由守卫的路由，我们将其使用`PrivateRoute`组件进行包装，并将其`element`属性设置为需要进行路由守卫的组件。对于不需要进行路由守卫的路由，我们直接使用`Route`组件进行定义。

这样，我们就成功地实现了React-router6中的全局路由守卫。