登录成功后无法进入/dashboard路由，控制台同时出现两类提示

问题现象 #

登录表单提交后控制台输出：

login success
PrivateRoute.jsx:6 Must Login
PrivateRoute.jsx:6 Must Login

无法进入/dashboard路由，仍停留在登录页面或被重定向回登录页。

问题原因及修复方案 #

1. 路由配置错误（Routes.jsx） #

原代码中嵌套路由写法不符合react-router-dom v6规范，且未将loggedIn状态传递给PrivateRoute，导致私有路由无法正确识别登录状态。

修正后的Routes.jsx：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import LoginPage from './pages/Login/LoginPage';
import DashboardPage from './pages/Dashboard/DashboardPage';
import PrivateRoute from './components/PrivateRoute';

const MyRoutes = ({ loggedIn, setLoggedIn }) => {
  return (
    <Router>
      <Routes>
        {/* 登录路由 */}
        <Route path="/login" element={<LoginPage setLoggedIn={setLoggedIn} />} />
        {/* 私有路由：直接包裹Dashboard页面，传递登录状态 */}
        <Route 
          path="/dashboard" 
          element={
            <PrivateRoute loggedIn={loggedIn}>
              <DashboardPage />
            </PrivateRoute>
          } 
        />
        {/* 默认重定向到登录页 */}
        <Route path="/" element={<Navigate to="/login" />} />
      </Routes>
    </Router>
  );
};

export default MyRoutes;

修改说明：

• 移除冗余的Fragment和嵌套Route结构，简化路由层级
• 将loggedIn状态传递给PrivateRoute，确保组件能获取登录状态判断权限

2. PrivateRoute组件不符合v6规范 #

react-router-dom v6中，私有路由不再返回Route组件，而是作为包装组件通过children传递受保护的页面内容。

修正后的PrivateRoute.jsx：

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

const PrivateRoute = ({ loggedIn, children }) => {
  if (!loggedIn) {
    console.log('Must Login');
    return <Navigate to="/login" replace />;
  }

  const userVerified = true;
  if (!userVerified) {
    console.log('User has not been verified.');
    return <Navigate to="/" replace />;
  }

  // 登录且验证通过，返回受保护的页面内容
  return children;
};

export default PrivateRoute;

修改说明：

• 接收children属性，直接返回受保护页面，无需再嵌套Route组件
• 为Navigate添加replace属性，避免历史记录中留存无效跳转记录
• 简化props结构，只保留必要的登录状态和页面内容参数

3. Login组件的输入错误与逻辑优化 #

原密码输入框onChange事件存在语法错误，且额外维护loginSuccess状态冗余，可直接依赖父组件的loggedIn状态判断跳转。

修正后的Login.jsx：

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

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

  // 已登录则直接跳转Dashboard
  if (loggedIn) {
    return <Navigate to="/dashboard" replace />;
  }

  const handleLogin = async () => {
    try {
      // 替换为实际后端登录接口地址，示例为'/api/login'
      const response = await axios.post('/api/login', {
        username,
        password,
      });
      console.log('login success');
      localStorage.setItem('token', response.data.token);
      setLoggedIn(true);
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)} // 修正此处的target层级错误
        placeholder="Password"
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

修改说明：

• 修正密码输入框onChange事件，将e.target.target改为e.target，确保密码能正常输入
• 移除loginSuccess状态，直接通过父组件传递的loggedIn状态判断是否跳转
• 修正axios请求地址，替换为合理的后端接口路径（原代码的'localhost'为无效地址）

4. 可选优化：页面刷新后保留登录状态 #

用户刷新页面时，loggedIn状态会重置为false，可在App组件初始化时读取本地存储的token自动恢复登录状态：

优化后的App.js：

import React, { useState, useEffect } from 'react';
import AppRoutes from './Routes';

function App() {
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    // 读取本地存储的token，存在则自动标记为已登录
    const token = localStorage.getItem('token');
    if (token) {
      setLoggedIn(true);
    }
  }, []);

  return (
    <div className="App">
      <AppRoutes loggedIn={loggedIn} setLoggedIn={setLoggedIn} />
    </div>
  );
}

export default App;

验证修复效果 #

完成以上修改后：

1. 登录成功后loggedIn状态变为true
2. PrivateRoute不再输出"Must Login"提示
3. 页面自动跳转到/dashboard路由并正常显示内容

内容的提问来源于stack exchange，提问作者DG Alter