React.js中登录成功后从登录页跳转至仪表盘页的实现问题

前置准备 #

先确保你已安装react-router-dom，如果未安装，执行以下命令：

npm install react-router-dom
# 或
yarn add react-router-dom

1. 配置基础路由结构 #

首先在根组件中设置路由，同时给仪表盘页面添加路由保护（未登录用户无法直接访问）：

// src/App.js
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Login from './components/Login';
import Dashboard from './components/Dashboard';

// 路由保护组件
const ProtectedRoute = ({ children }) => {
  // 这里用localStorage存储登录状态，实际项目可替换为JWT令牌验证
  const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
  return isLoggedIn ? children : <Navigate to="/login" />;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        } />
        // 默认跳转至登录页
        <Route path="/" element={<Navigate to="/login" />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 登录组件中实现跳转逻辑 #

函数组件版本（使用useNavigate） #

// src/components/Login.js
import { useState, useNavigate } from 'react';

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

  const handleLogin = async (e) => {
    e.preventDefault();
    // 替换为你的实际登录API请求
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      
      if (response.ok) {
        // 存储登录状态
        localStorage.setItem('isLoggedIn', 'true');
        // 跳转至仪表盘
        navigate('/dashboard');
      } else {
        alert('登录失败，请检查账号密码');
      }
    } catch (error) {
      console.error('登录请求出错:', error);
      alert('登录请求失败，请稍后重试');
    }
  };

  return (
    <div className="login-container">
      <form onSubmit={handleLogin}>
        <input
          type="text"
          placeholder="用户名"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          required
        />
        <input
          type="password"
          placeholder="密码"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <button type="submit">登录</button>
      </form>
    </div>
  );
}

export default Login;

类组件版本（使用withRouter） #

如果你的项目使用类组件，需要通过withRouter高阶组件获取路由跳转能力：

// src/components/Login.js
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Login extends Component {
  state = {
    username: '',
    password: ''
  };

  handleLogin = async (e) => {
    e.preventDefault();
    const { username, password } = this.state;
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
      });
      
      if (response.ok) {
        localStorage.setItem('isLoggedIn', 'true');
        // 跳转至仪表盘
        this.props.history.push('/dashboard');
      } else {
        alert('登录失败，请检查账号密码');
      }
    } catch (error) {
      console.error('登录请求出错:', error);
      alert('登录请求失败，请稍后重试');
    }
  };

  render() {
    const { username, password } = this.state;
    return (
      <div className="login-container">
        <form onSubmit={this.handleLogin}>
          <input
            type="text"
            placeholder="用户名"
            value={username}
            onChange={(e) => this.setState({ username: e.target.value })}
            required
          />
          <input
            type="password"
            placeholder="密码"
            value={password}
            onChange={(e) => this.setState({ password: e.target.value })}
            required
          />
          <button type="submit">登录</button>
        </form>
      </div>
    );
  }
}

export default withRouter(Login);

3. 额外注意事项 #

• 登录状态存储：示例用localStorage，实际项目建议结合JWT令牌，将令牌存入localStorage或sessionStorage，后续请求时携带令牌进行身份验证。
• 路由保护：ProtectedRoute可根据业务逻辑扩展，比如验证令牌有效性后再决定是否允许访问。
• 错误处理：可结合全局状态管理（如Redux、Context）统一处理登录状态和错误提示，提升用户体验。

内容的提问来源于stack exchange，提问作者Umesh Singh