Next.js Context API页面切换时丢失状态问题排查

问题原因 #

你遇到的问题核心是Context Provider的挂载范围不对。当前你只在Index页面里用Provider包裹了PageA，而PageB作为独立路由页面，它的组件树并没有被同一个Provider覆盖。当通过Link或router.push切换到PageB时，Next.js会重新渲染新页面的组件树，此时PageB会创建一个全新的Context实例，自然丢失之前的状态。

解决方案 #

把Context Provider提升到Next.js的全局根组件_app.js（或_app.tsx）中，这是Next.js全局共享状态的标准实现方式，所有页面都会共享同一个Context实例，路由切换时Provider不会重新挂载，状态得以保留。

修改后的代码示例 #

1. 更新_app.js：

import Context from '../components/context'
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return (
    <Context>
      <Component {...pageProps} />
    </Context>
  )
}

export default MyApp

2. 简化原入口页面（比如pages/index.js）：

import PageA from '../components/pageA'

const Index = () => {
  return <PageA />
}

export default Index

这样修改后，无论是PageA还是PageB，都会处于同一个Context Provider之下，点击按钮更新count后，跳转到PageB就能看到正确的状态值了。

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