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

相关问题

react-router-dom v6路由守卫

在 react-router-dom v6 中，路由守卫（Route Guards）的实现方式有所改变。v6 中引入了新的 `useNavigate` 钩子函数来处理导航，以及 `<Routes>` 组件来定义路由规则。

要实现路由守卫，你可以使用 `useNavigate` 钩子函数来进行导航，并结合 `<Routes>` 组件的 `element` 属性来定义需要守卫的路由组件。下面是一个简单的示例：

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

// 自定义的路由守卫组件
function PrivateRoute({ element: Element, ...rest }) {
  const navigate = useNavigate();
  const isAuthenticated = /* 判断用户是否已登录的逻辑 */;

  if (!isAuthenticated) {
    // 如果用户未登录，导航到登录页
    navigate('/login');
    return null; // 或返回一个加载中的组件等待重定向
  }

  return <Route {...rest} element={<Element />} />;
}

// 在路由配置中使用路由守卫
function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <PrivateRoute path="/dashboard" element={<DashboardPage />} />
      <Route path="/login" element={<LoginPage />} />
    </Routes>
  );
}

在上面的示例中，我们创建了一个 `PrivateRoute` 组件作为路由守卫，通过判断用户是否已登录来决定是否允许访问受保护的页面。如果用户未登录，则使用 `useNavigate` 钩子函数进行重定向到登录页。

在 `<Routes>` 组件中，我们使用 `<Route>` 定义了几个路由规则，其中包括一个受保护的路由 `/dashboard`，它使用了我们自定义的 `PrivateRoute` 组件来进行路由守卫。

请注意，这只是一个简单示例，实际项目中可能需要更复杂的路由守卫逻辑。你可以根据具体需求来自定义和扩展路由守卫功能。

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

对于react-router-dom v6，可以使用<Route>组件的element属性来实现路由守卫和异步请求。下面是一个示例代码：

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

function PrivateRoute({ path, element }) {
  const isAuthenticated = checkAuth(); // 检查用户是否已登录

  if (isAuthenticated) {
    return <Route path={path} element={element} />;
  } else {
    return <Navigate to="/login" replace />;
  }
}

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

在上述代码中，PrivateRoute组件用于实现路由守卫功能。通过调用checkAuth()函数来检查用户是否已登录。如果用户已登录，PrivateRoute会渲染传入的element属性，即目标路由组件；如果用户未登录，PrivateRoute会使用Navigate组件重定向到登录页面。

请注意，这只是一个简单的示例，具体的路由守卫和异步请求的逻辑需要根据具体项目的需求进行实现。