React Router Dom Protected Route在刷新页面期间始终重定向到登录

React Router Dom是一个用于构建单页面应用的React路由库。它提供了一组组件，用于管理应用程序的不同页面之间的导航和路由。

Protected Route是React Router Dom中的一个组件，用于保护需要用户登录才能访问的页面。在刷新页面期间，如果用户已经登录，Protected Route会始终重定向到登录后的页面，否则会重定向到登录页面。

Protected Route的作用是确保用户在未登录的情况下无法访问受保护的页面，以增强应用程序的安全性和用户体验。

使用Protected Route可以遵循以下步骤：

创建一个用于验证用户登录状态的函数，例如isUserLoggedIn。该函数可以通过检查本地存储或发送请求到服务器来确定用户是否已登录。
在应用程序的路由配置中，使用Protected Route组件来包装需要保护的页面。例如：

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

const ProtectedRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isUserLoggedIn() ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

// 在路由配置中使用ProtectedRoute
<Switch>
  <ProtectedRoute exact path="/dashboard" component={Dashboard} />
  <Route path="/login" component={Login} />
</Switch>

在上面的示例中，如果用户已登录，则会渲染Dashboard组件；否则，会重定向到登录页面。

Protected Route的优势是可以轻松地实现对受保护页面的访问控制，提高应用程序的安全性。它还提供了灵活的配置选项，可以根据具体需求进行定制。

应用场景包括但不限于：