Next.js中useContext状态跨页面无法持久化的问题排查

问题根源 #

你用<Button href="tela-aluno">跳转页面时，本质是触发了浏览器全页面刷新，这会导致整个Next.js应用重新初始化——包括AppProvider里的useReducer会重新加载initialState，所以之前修改的showAlert状态会丢失，回到默认的false。

解决方案一：使用Next.js客户端路由跳转（推荐） #

Next.js提供了next/link组件实现单页应用的客户端导航，这种跳转不会刷新整个页面，Context中的状态会被保留。

修改你的login_button组件：

import { Button } from "@mui/material";
import React, { useEffect } from "react";
import { useAppContext } from '../../../context/AppContext';
import Link from 'next/link'; // 导入Next.js的Link组件

const LoginButton = () => {
  const { displayAlert } = useAppContext();

  // 空依赖数组确保只执行一次
  useEffect(() => {
    displayAlert();
  }, []);

  return (
    <Link href="/tela-aluno" passHref>
      <Button style={buttonStyle}>Sign in</Button>
    </Link>
  );
};

export default LoginButton;

解决方案二：结合本地存储持久化状态（针对必须刷新页面的场景） #

如果业务场景必须用全页面刷新跳转，你可以把Context状态同步到localStorage或sessionStorage，在App初始化时从存储中读取状态，避免重置。

修改context/AppContext.js：

'use client';
import React, { useState, useReducer, useContext, useEffect } from 'react'
import reducer from './reducer'; 

const DISPLAY_ALERT = 'SHOW ALERT';

export const initialState = {
    showAlert: false
}

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
  // 初始化时优先从localStorage读取状态，没有则用默认值
  const initialStateFromStorage = typeof window !== 'undefined' 
    ? JSON.parse(localStorage.getItem('appState')) || initialState 
    : initialState;

  const [state, dispatch] = useReducer(reducer, initialStateFromStorage);

  // 监听状态变化，实时同步到localStorage
  useEffect(() => {
    localStorage.setItem('appState', JSON.stringify(state));
  }, [state]);

  const displayAlert = () => {
      dispatch({type: DISPLAY_ALERT})
  }

  return <AppContext.Provider value={{...state, displayAlert}}>{children}</AppContext.Provider>
  
}
export const useAppContext = () =>  {
   return useContext(AppContext)
}

这样即使页面刷新，状态也会从localStorage中恢复，不会回到默认值。

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