如何使用带有passport集成的PrivateRoutes -router-dom设置路由器

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

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

export default PrivateRoute;

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import Home from './components/Home';
import Login from './components/Login';

const App = () => {
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    // 在此处进行身份验证逻辑，例如检查用户的登录状态
    // 如果用户已登录，设置authenticated为true
    // 否则，设置authenticated为false
  }, []);

  return (
    <Router>
      <Switch>
        <PrivateRoute
          exact
          path="/"
          component={Home}
          authenticated={authenticated}
        />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
};

export default App;

import React from 'react';

const Home = () => {
  return <h1>Welcome to the private home page!</h1>;
};

export default Home;

import React, { useState } from 'react';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // 在此处进行登录逻辑，例如向服务器发送登录请求
    // 如果登录成功，设置authenticated为true
  };

  return (
    <div>
      <h1>Login Page</h1>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;