如何解决Next.js路由守卫中React-Redux状态未就绪的跳转异常

方案1：初始化时直接从localStorage读取状态 #

问题根源在于Redux初始状态是硬编码的false，而真实状态存在localStorage里。可以在定义auth状态的初始值时，直接读取localStorage的内容，让首次渲染就能拿到正确值：

// auth slice 示例
const initialState = {
  authState: localStorage.getItem('authState') === 'true' || false
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    // 你的状态更新逻辑
    setAuthState: (state, action) => {
      state.authState = action.payload;
      localStorage.setItem('authState', action.payload.toString());
    }
  }
});

这样组件首次渲染时，isLogged就会是localStorage里的真实值，不会出现先跳转到login再跳回首页的问题。

方案2：增加状态加载完成标识 #

如果需要异步加载状态（比如从接口获取而不是直接读localStorage），可以给auth状态加一个isLoaded字段，用来标记Store是否完成初始化：

// auth slice 示例
const initialState = {
  authState: false,
  isLoaded: false
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAuthState: (state, action) => {
      state.authState = action.payload;
    },
    setIsLoaded: (state, action) => {
      state.isLoaded = action.payload;
    }
  }
});

// 异步加载状态的action
export const loadAuthState = () => (dispatch) => {
  const savedAuth = localStorage.getItem('authState') === 'true';
  dispatch(authSlice.actions.setAuthState(savedAuth));
  dispatch(authSlice.actions.setIsLoaded(true));
};

然后在主布局组件中，只在isLoaded为true时执行跳转逻辑：

const { authState: isLogged, isLoaded } = useSelector(selectAuthState);
const router = useRouter();

// 触发状态加载
useEffect(() => {
  dispatch(loadAuthState());
}, [dispatch]);

useEffect(() => {
  if (!isLoaded) return; // 未就绪时不执行跳转
  isLogged ? router.push('/') : router.push('/login');
}, [isLogged, isLoaded, router]);

方案3：使用Redux Persist（推荐用于复杂持久化场景） #

如果你的项目已经使用Redux Persist，它会自动处理状态的持久化与初始化，确保组件首次渲染就能拿到持久化后的真实状态。只需配置好persist的auth slice，无需额外判断Store是否就绪，useSelector直接就能拿到正确值。

内容的提问来源于stack exchange，提问作者Juan Andres solanas