React Redux导航栏报错：无法读取isAuthenticated属性

问题现象 #

导航栏根据isAuthenticated切换Login/Logout按钮时，页面抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'isAuthenticated')，但isAuthenticated已在authReducer中定义。

核心原因与修复步骤 #

1. 修复Root Reducer的导入路径错误 #

这是导致state.auth为undefined的直接原因：你的authReducer定义在reducers.js文件中，但rootreducer.js里错误导入了不存在的authReducer.js文件，导致Redux Store中没有挂载auth切片，访问state.auth.isAuthenticated自然报错。

修改rootreducer.js：

// 原错误代码
import authReducer from "./authReducer";

// 修正后
import authReducer from "./reducers";

2. 让Login组件触发Redux登录状态更新 #

当前Login组件仅将token存入localStorage，未触发Redux的LOGIN_SUCCESS action，导致Redux状态未同步更新，登录后isAuthenticated仍为false。

修改Login.jsx：

// 新增导入
import { useDispatch } from "react-redux";
import { login } from "../../redux/actions";

const Login = () => {
  // 新增dispatch实例
  const dispatch = useDispatch();
  // ... 其他原有代码

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post("http://localhost:8080/login", {
        email,
        password,
      });

      const token = response.data.token;
      localStorage.setItem("token", token);
      // 新增：dispatch登录成功action
      dispatch(login(email, password));

      toast.success("Login successful", {
        // ... 原有配置
        onClose: () => {
          navigate("/admindashboard");
          // 移除强制刷新：dispatch后状态已更新，无需刷新页面
          // setTimeout(() => { window.location.reload(); }, 1000);
        },
      });
    } catch (error) {
      toast.error("Login failed");
      console.log("Error:", error.response.data.message);
    }
  };
  // ... 其他原有代码
};

3. 修复导航链接的大小写不一致问题 #

data.jsx中Logout链接的name是小写logout，但Navbar中过滤逻辑判断的是大写开头的Logout，导致过滤失效，无法正确切换按钮。

修改data.jsx：

// 原代码
{
  id: 7,
  name: "logout",
  icon: <FiLogOut className="nav_icon" />,
  path: "/",
},

// 修正后
{
  id: 7,
  name: "Logout",
  icon: <FiLogOut className="nav_icon" />,
  path: "/",
},

4. 添加页面加载时的状态恢复逻辑 #

页面刷新后Redux状态会重置，需要从localStorage读取已保存的token，恢复登录状态。

在App.jsx中添加初始化逻辑：

import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { LOGIN_SUCCESS } from "./redux/actions";

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (token) {
      dispatch({ type: LOGIN_SUCCESS, payload: token });
    }
  }, [dispatch]);

  // ... 其他原有代码
}

验证效果 #

1. 登录成功后，导航栏自动切换为Logout按钮，不再显示Login
2. 点击Logout按钮，触发退出逻辑并跳转首页，导航栏切换回Login按钮
3. 页面不再抛出isAuthenticated未定义的错误

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