在 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>
    </>
  );
}