reactjs - React Context API 全局状态不会在反应中跨不同路由更新

Question

当我从 Page1 增加状态时，它会为 Page1 更新。但是当我转到第2页时，状态再次变为0。我没有从第1页获得更新的状态。有什么方法可以跨路由创建全局状态？

上下文.js

import React, { useState } from "react";
export const Context = React.createContext();

export const ContextProvider = ({ children }) => {
  const [state, setstate] = useState(0);
  
  return (
    <Context.Provider value={{ state, setstate }}>{children}</Context.Provider>
  );
};

Page1.js

 const Page1 = () => {
      const { state, setstate } = useContext(Context);
      console.log("Page1: ", state);
       return (
        <div>
          <h1>PAGE 1</h1>
          {state}
          <button onClick={() => setstate(state + 1)}>INC</button>
        </div>
       );
     };

Page2.js

const Page2 = () => {
  const { state, setstate } = useContext(Context);
  return (
    <div>
      <h1>PAGE 2</h1>
      {state}

      <button onClick={() => setstate(state + 1)}>INC</button>
    </div>
  );
};

标签： reactjsreact-routerreact-context