react-router-domv6路由守卫

对于 React Router DOM v6，路由守卫的实现方式与 v5 有所不同。在 React Router DOM v6 中，可以使用 `Routes` 组件包裹所有的路由，然后在 `Routes` 组件内部使用 `Route` 组件来定义具体路由。要实现路由守卫，在 `Route` 组件上使用 `element` 属性来指定要渲染的组件，同时在 `Route` 组件上添加 `onBeforeEnter` 属性，用来定义路由守卫的逻辑。例如：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/dashboard" element={<Dashboard />} onBeforeEnter={requireAuth} />
  <Route path="*" element={<NotFound />} />
</Routes>

在上面的例子中，`Dashboard` 组件需要进行路由守卫，所以添加了 `onBeforeEnter` 属性来定义路由守卫的逻辑。`requireAuth` 函数可以用来定义路由守卫的逻辑，例如需要判断用户是否已登录等。如果 `requireAuth` 函数返回 `true`，则路由跳转继续；如果返回 `false`，则路由跳转被阻止。