如何在reactjs中限制用户路由

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

const withAuth = (Component) => {
  // 这里可以编写权限控制的逻辑
  const isAuthenticated = true; // 假设用户已登录

  return (props) => {
    if (isAuthenticated) {
      return <Component {...props} />;
    }
    return <Redirect to="/login" />;
  };
};

const PrivateComponent = () => {
  return <div>私有组件</div>;
};

const AuthComponent = withAuth(PrivateComponent);

export default AuthComponent;

import React, { useContext } from 'react';

const AuthContext = React.createContext();

const AuthProvider = ({ children }) => {
  // 这里可以获取用户权限信息
  const isAuthenticated = true; // 假设用户已登录

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

const PrivateComponent = () => {
  const isAuthenticated = useContext(AuthContext);

  return isAuthenticated ? (
    <div>私有组件</div>
  ) : (
    <Redirect to="/login" />
  );
};

export default PrivateComponent;