检查是否已登录- React路由器-重定向

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

// 创建一个上下文用于存储登录状态
const AuthContext = React.createContext();

// 定义一个包装组件，用于提供上下文和登录状态
const AuthProvider = ({ children }) => {
  const isAuthenticated = checkIfUserIsLoggedIn(); // 检查用户是否已登录

  return (
    <AuthContext.Provider value={isAuthenticated}>
      {children}
    </AuthContext.Provider>
  );
};

// 定义一个私有路由组件，用于进行登录状态的检查
const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 在应用程序中使用AuthProvider包装整个应用
const App = () => {
  return (
    <AuthProvider>
      <Router>
        <Switch>
          <Route exact path="/login" component={LoginPage} />
          <PrivateRoute exact path="/dashboard" component={DashboardPage} />
        </Switch>
      </Router>
    </AuthProvider>
  );
};