MERN栈（Redux）下解决页面刷新时受保护路由跳转及Navbar内容闪烁问题

这个问题的核心在于异步加载用户数据时的状态间隙——页面刷新后，Redux的auth状态会重置为初始值，而loadUser请求需要时间完成，这期间组件会基于初始的user: null渲染未登录状态，导致重定向和Navbar闪烁。下面是具体的解决方案：

1. 在Redux的auth状态中添加加载标记 #

首先需要给auth状态增加一个loading字段，用来标记用户数据是否正在加载。这样我们就能区分“还没加载完成”和“确实未登录”两种状态。

示例：修改auth切片的初始状态和异步逻辑 #

假设你用Redux Toolkit管理状态，代码可以这样写：

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';

// 异步加载用户的action
export const loadUser = createAsyncThunk('auth/loadUser', async () => {
  const res = await axios.get('/api/auth/me');
  return res.data;
});

const authSlice = createSlice({
  name: 'auth',
  // 初始状态：loading设为true，因为页面加载时会立刻发起loadUser请求
  initialState: {
    user: null,
    loading: true,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      // 请求发起时，标记为加载中
      .addCase(loadUser.pending, (state) => {
        state.loading = true;
      })
      // 请求成功，更新用户数据并结束加载
      .addCase(loadUser.fulfilled, (state, action) => {
        state.user = action.payload;
        state.loading = false;
      })
      // 请求失败（比如用户未登录），结束加载并清空用户数据
      .addCase(loadUser.rejected, (state) => {
        state.user = null;
        state.loading = false;
      });
  },
});

export default authSlice.reducer;

2. 更新ProtectedRoute组件 #

现在修改ProtectedRoute，让它在loading为true时显示加载状态，而不是直接重定向。等加载完成后，再根据user是否存在决定路由跳转：

import { Navigate, Outlet } from 'react-router-dom';
import { useSelector } from 'react-redux';
// 可以用自定义Loading组件，或者直接用简单的占位元素
import Loading from './Loading';

const ProtectedRoute = () => {
  const { user, loading } = useSelector(state => state.auth);

  // 加载中时，显示加载组件，避免过早重定向
  if (loading) {
    return <Loading />;
  }

  // 加载完成后，判断用户是否存在
  return user ? <Outlet /> : <Navigate to='/' />;
};
export default ProtectedRoute;

3. 修复Navbar的闪烁问题 #

同样在Navbar中加入loading状态的判断，加载过程中显示一个过渡UI（比如加载动画），而不是直接显示登录/注册按钮，这样就能避免内容闪烁：

<Navbar.Collapse id='basic-navbar-nav'>
  {loading ? (
    // 加载中时显示占位UI，这里用Bootstrap的Spinner示例
    <div className='ms-auto d-flex align-items-center'>
      <span className="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    </div>
  ) : user ? (
    <div className='ms-auto d-flex align-items-center'>
      <Nav.Link as={Link} to='/create-post'>
        Create Post
      </Nav.Link>
      <div>
        <Image className='user-img' fluid src={user?.avatar.url} ></Image>
      </div>
      <NavDropdown title={user.username} id='username'>
        <LinkContainer to={`/profile/${user._id}`}>
          <NavDropdown.Item>Profile</NavDropdown.Item>
        </LinkContainer>
        <NavDropdown.Item onClick={logoutHandler}>
          Logout
        </NavDropdown.Item>
      </NavDropdown>
    </div>
  ) : (
    <Nav className='ms-auto'>
      <Nav.Link as={Link} to='/login'>
        Log In
      </Nav.Link>
      <Nav.Link as={Link} to='/register'>
        Sign Up
      </Nav.Link>
    </Nav>
  )}
</Navbar.Collapse>

关键说明 #

• 如果你没有自定义Loading组件，可以用简单的文本（比如Loading...）或者UI库提供的加载组件替代。
• 确保App.js中的loadUser请求在组件挂载时正常触发，这样页面刷新后会立刻开始加载用户数据。

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