以编程方式在React中登录后进行路由

npm install react react-router-dom

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

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

  const handleLogin = () => {
    // 执行登录逻辑，验证用户名和密码
    // 如果验证成功，可以将用户信息存储在本地或使用其他方式进行身份验证

    // 跳转到受保护的页面
    history.push('/dashboard');
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <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 type="submit">Login</button>
      </form>
    </div>
  );
};

export default LoginComponent;

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

const DashboardComponent = ({ isLoggedIn }) => {
  if (!isLoggedIn) {
    // 如果未登录，重定向到登录页面
    return <Redirect to="/login" />;
  }

  return (
    <div>
      <h2>Dashboard</h2>
      {/* 受保护的页面内容 */}
    </div>
  );
};

export default DashboardComponent;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import LoginComponent from './LoginComponent';
import DashboardComponent from './DashboardComponent';

const App = () => {
  const isLoggedIn = false; // 根据实际登录状态设置

  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginComponent} />
        <Route
          exact
          path="/dashboard"
          render={() => <DashboardComponent isLoggedIn={isLoggedIn} />}
        />
      </Switch>
    </Router>
  );
};

export default App;