React Router切换页面时如何保持Context API的计数器状态？

解决方案 #

你当前使用的localStorage属于持久化本地存储，只要用户不主动清理缓存数据就会一直保留，不符合你关闭浏览器自动重置状态的需求，替换为会话级存储sessionStorage即可：

• sessionStorage的生命周期和浏览器会话绑定，关闭浏览器或者当前站点的所有标签页后，存储的数据会自动清空
• 同一站点下的客户端路由切换（你使用的React Router跳转属于这类场景）时，sessionStorage的数据会全局共享，完全满足页面切换保留计数器值的需求

另外你现有代码存在边缘场景缺陷：如果存储中没有对应值，JSON.parse会返回null导致计数器初始值异常，需要添加默认值回退逻辑，还可以优化计数器更新逻辑为函数式写法避免闭包问题，修改后的完整代码如下：

export const CounterContext = React.createContext()

function App() {
  const [Counter, setCounter] = useState(0)
  useEffect(() => {
    // 替换为sessionStorage，无存储值时默认回退到0
    const savedCount = window.sessionStorage.getItem('count')
    setCounter(savedCount ? JSON.parse(savedCount) : 0);
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem('count', JSON.stringify(Counter));
  }, [Counter]);
  
  function ChangeCounter() {
    // 函数式更新避免闭包陷阱
    setCounter(prev => prev + 1);
  }
  console.log(Counter);

  return (
    <CounterContext.Provider value={{Counter, ChangeCounter}}>
    <Router>
    <div className="App">
      <header className="App-header">
        <Navbar />
      </header>
      <div className="Content">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/Products">
            <Products />
          </Route>
          <Route path="/Contact">
            <Contact />
          </Route>        
        </Switch>
      </div>
      
      <footer>
        <Footer />
      </footer>
    </div>
    </Router>
    </CounterContext.Provider>
  );
}

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