在react- PrivateRoute -dom中测试路由器

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

// 假设这是一个私有页面组件
const PrivatePage = () => {
  return (
    <div>
      <h1>私有页面</h1>
      <p>只有已登录用户才能访问</p>
    </div>
  );
};

// 假设这是一个登录页面组件
const LoginPage = () => {
  return (
    <div>
      <h1>登录页面</h1>
      <p>用户登录表单等内容</p>
    </div>
  );
};

// 自定义PrivateRoute组件
const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = /* 判断用户是否已登录的逻辑，例如从本地存储或全局状态中获取登录状态 */;
  
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 应用的主要组件
const App = () => {
  return (
    <Router>
      <div>
        <h1>我的应用</h1>
        
        <Route path="/login" component={LoginPage} />
        <PrivateRoute path="/private" component={PrivatePage} />
      </div>
    </Router>
  );
};

export default App;