基于Redux用户状态条件渲染登录/仪表盘的问题排查

一、Login组件报错的直接原因 #

1. React导入错误 #

Login组件开头写的import react from 'react'不符合规范，JSX语法依赖大写的React对象在作用域中，小写导入会导致React无法识别JSX，直接抛出错误。

2. Redux状态选择器使用错误 #

Login组件中const user = useSelector(state => state.user);获取的是整个user reducer的容器状态（结构为{user: null/用户对象}），而非实际用户数据。应该使用slice中导出的selectUser选择器，避免嵌套结构错误。

3. Google Auth全局变量未确保加载 #

useEffect中直接调用google.accounts.id，若Google Auth脚本未加载完成，会触发google未定义的错误。

二、刷新后白屏/状态丢失的原因 #

Redux状态默认存储在内存中，页面刷新后会重置为initialState的user: null；若此时Login组件存在报错，就会导致整个页面白屏。同时，刷新后用户状态丢失，无法自动跳转到Dashboard。

三、分步修复代码 #

1. 修复Login组件的基础错误 #

修改Login组件的导入和状态选择逻辑：

// 修正React导入
import React from 'react'
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import jwt_decode from "jwt-decode";

// Redux
import { useSelector, useDispatch } from 'react-redux';
import { login, selectUser } from '../../userSlice';

// ... 其余样式、组件导入不变

// 替换错误的useSelector，使用统一的状态选择器
const user = useSelector(selectUser); 
const dispatch = useDispatch();

// ... handleCallbackResponse函数不变

// 优化useEffect中的Google Auth调用，增加存在性判断
useEffect(() => {
  // 确保google全局变量加载完成再执行初始化
  if (window.google) {
    google.accounts.id.initialize({
        client_id: clientID,
        callback: handleCallbackResponse
    });

    google.accounts.id.renderButton(
        document.getElementById('signInButton'),
        { theme: 'outline', size: 'large', type: 'standard' }
    );
  }
}, []);

// ... 其余渲染代码不变

2. 实现Redux状态持久化，解决刷新丢失问题 #

修改userSlice，同步状态到localStorage：

import { createSlice } from "@reduxjs/toolkit";

// 初始化时读取localStorage中的用户数据，避免刷新后状态丢失
const initialState = { 
  user: JSON.parse(localStorage.getItem('user')) || null, 
};

export const userSlice = createSlice({ 
    name: "user", 
    initialState, 
    reducers: { 
        login: (state, action) => { 
          state.user = action.payload; 
          // 登录成功后同步到localStorage
          localStorage.setItem('user', JSON.stringify(action.payload));
        }, 
        logout: (state) => { 
          state.user = null; 
          // 登出时清除localStorage中的用户数据
          localStorage.removeItem('user');
        } 
    }, 
});

export const { login, logout } = userSlice.actions;
export const selectUser = (state) => state.user.user; 
export default userSlice.reducer;

3. 优化Authentication组件的路由逻辑 #

将条件渲染改为结合React Router的Navigate组件，更符合路由规范，避免组件切换异常：

// Components 
import Login from './Authentication/Login'; 
import { Navigate } from "react-router-dom";

// Redux 
import { useSelector } from 'react-redux'; 
import { selectUser } from '../userSlice';

function Authentication() {
    const user = useSelector(selectUser); 

    // 已登录则直接跳转到仪表盘，未登录显示登录页
    if (user) {
      return <Navigate to="/dashboard" replace />;
    }
    return <Login />;
}

export default Authentication;

同时确保路由配置中，/dashboard对应Dashboard组件，且可在Dashboard组件内添加登录校验：若未登录则跳回根路由。

四、实现方式优化建议 #

1. 封装路由守卫：将登录判断逻辑封装为PrivateRoute高阶组件，所有需登录访问的路由都用该组件包裹，减少重复代码。
2. 提前加载Google Auth脚本：在public/index.html中添加脚本，确保加载完成后再初始化：

<script src="https://accounts.google.com/gsi/client" async defer></script>

3. 添加错误边界：在应用根组件中实现错误边界，捕获子组件报错，避免整个应用白屏。

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