在React中登录后对页面的限制

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

// 定义私有路由组件
const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = checkUserLogin(); // 检查用户是否已登录

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

// 定义需要限制访问的页面组件
const HomePage = () => {
  return <h1>Welcome to the home page!</h1>;
};

const ProfilePage = () => {
  return <h1>Welcome to your profile page!</h1>;
};

const LoginPage = () => {
  return <h1>Please login to access this page.</h1>;
};

const App = () => {
  return (
    <Router>
      <Route path="/login" component={LoginPage} />
      <PrivateRoute path="/home" component={HomePage} />
      <PrivateRoute path="/profile" component={ProfilePage} />
    </Router>
  );
};

export default App;