在 React.js 中维护路由之间的上下文值

Question

我正在尝试在上下文中的路由之间维护 state 值。 但是当路线改变时它会被重置。

aackage.json：

 "react-router-dom": "^6.8.0",
 "react-dom": "^18.2.0",
 "react": "^18.2.0",

应用程序.js：

export default const App = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const getData = async () => {
    setLoading(true);
    const data = await axios.get("url", {
      withCredentials: true,
    });
    setData(data);
    setLoading(false);
  };

   useEffect(() => {
    getData()
    console.log("I run on route change");
  }, []);
  

  const GlobalContextValue= {
    data: data,
    loading: loading,
  };



   return (
    <>
      <GlobalContextProvider value={GlobalContextValue}>
      <BrowserRouter>
        <Routes>
          <Route index element={<HomePage />} />
          <Route path="/:slug" element={<PostPage />} />
          {/* <Route path="*" element={<NoPage />} /> */}
        </Routes>
      </BrowserRouter>
      </<GlobalContextProvider />
    </>
  )

}

每当我尝试访问任何路由时，useEffect 调用中的getData function 都会重新设置数据。 我附上了一个CodeSandbox来复制相同的

我不知道这个问题是否与 reactJs 或 react-router 有关。提前致谢

Answer 1

由于您似乎没有任何导航链接，我假设您使用的是浏览器搜索栏或普通的 HTML <a>标签。 那么，这样做会刷新页面，因此会重新创建整个应用程序。

使用 React Router Dom 中的useNavigate或Link不会刷新页面，因此您的上下文数据保持不变：

const HomePage = () => {
  return (
    <>
      <h1>Hii Homepage </h1>
      <Link to="/1">Go to PostPage</Link>
    </>
  );
};

const PostPage = () => {
  const params = useParams();
  return (
    <>
      <h1>Hii PostPage {params.slug} </h1>
      <Link to="/">Go to HomePage</Link>
    </>
  );
};

export default function App() {
  useEffect(() => {
    console.log(
      "I run on load and route change with browser search bar, not with useNavigate or Link"
    );
  }, []);

  return (
    <>
      {/* This context wrapping BrowserRouter keeps its value if you navigate with Link or
      useNavigate. */}
      <GlobalContextProvider value={{ key: "some value" }}>
        <BrowserRouter>
          <Routes>
            <Route index element={<HomePage />} />
            <Route path="/:slug" element={<PostPage />} />
            {/* <Route path="*" element={<NoPage />} /> */}
          </Routes>
        </BrowserRouter>
      </GlobalContextProvider>
    </>
  );
}