React+Redux-Persist导航异常：未登录刷新仍显示首页

问题背景 #

登录功能基于Firebase Google Auth实现正常，使用redux-persist持久化用户状态避免刷新丢失，但导航逻辑失效：

• 当currentUser为null时，未自动跳转到登录页，仍显示首页
• 访问/login路径时，currentUser为null却未显示登录组件

问题原因 #

1. 首页路由（根路径/的index路由）未做登录校验，无论用户是否登录都会直接渲染Home组件
2. 仅在/login路由中做了组件渲染判断，但未对首页等受保护页面做登录拦截

修复方案 #

1. 实现受保护路由组件 #

新建ProtectedRoute.js，用于拦截未登录用户访问受保护页面：

import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

export default function ProtectedRoute({ children }) {
  const { currentUser } = useSelector(state => state.user);

  if (!currentUser) {
    return <Navigate to="/login" replace />;
  }

  return children;
}

2. 调整App.js路由配置 #

用ProtectedRoute包裹需要登录的页面，并优化登录页逻辑：

import ProtectedRoute from './ProtectedRoute';

function App() {
  const { currentUser } = useSelector((state) => state.user);

  return (
    <div className="App">
      <BrowserRouter>
        <HeaderNav />
        <Routes>
          <Route path="/">
            {/* 首页需登录才能访问，未登录自动跳转到登录页 */}
            <Route index element={
              <ProtectedRoute>
                <Home type="random" />
              </ProtectedRoute>
            } />
            {/* 已登录用户访问/login时自动跳转到首页 */}
            <Route path="login" element={
              currentUser ? <Navigate to="/" replace /> : <Login />
            } />
            <Route path="articel">
              {/* 文章详情页添加登录保护 */}
              <Route path=":articelId" element={
                <ProtectedRoute>
                  <SingleArticel />
                </ProtectedRoute>
              } />
            </Route>
          </Route>
        </Routes>
        <NavBar />
      </BrowserRouter>
    </div>
  );
}

3. 确认redux-persist配置有效性 #

检查redux-store.js中的配置，确保状态持久化逻辑正确：

const persistConfig = {
  key: "root",
  version: 1,
  storage,
};
const rootReducer = combineReducers({ user: userReducer });
const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export const persistor = persistStore(store);

确保PersistGate正确包裹App组件，等待状态恢复完成后再渲染页面。

效果验证 #

• 未登录状态下刷新页面，会自动跳转到/login页面
• 已登录状态下访问/login，会自动跳转到首页
• 刷新页面后，用户状态能从LocalStorage中正确恢复

内容的提问来源于stack exchange，提问作者Captai-N