我如何將 React Context 與 react-router-dom 一起使用？

Question

授權上下文：

import { createContext } from "react";
export const AuthContext = createContext(null);

應用程序.js：

const App = () => {
  const isLogin = false;

  if (isLogin) {
    return (
      <RouterProvider router={privateRoute} />
    );
  } else {
    return (
      <RouterProvider router={publicRoute} />
    );
  }
};

export default App;

我嘗試將<RouterProvider>放在AuthContext中，如下所示：

<AuthContext.RouterProvider router={privateRoute} />

像這樣：

<AuthContext>
  <RouterProvider router={privateRoute} />
</AuthContext>

這些選項都不起作用。 我究竟做錯了什么？

Answer 1

您正在嘗試將AuthContext與RouterProvider一起使用，但AuthContext沒有名為RouterProvider的屬性或組件。

要將AuthContext與RouterProvider結合使用，您需要將RouterProvider組件包裝在一個使用AuthContext的值的組件中（即 useContext(AuthContext) ）。

這里有一個片段可以幫助你......在這里我們使用AuthContext值來確定routes的值，然后將它與RouterProvider一起使用

 const App = () => { const auth = useContext(AuthContext); const routes = auth.isLoggedIn? privateRoute: publicRoute; return ( <RouterProvider router={routes} /> ); }; export default App;

在里面，您需要將App組件包裝在AuthContext ，例如...

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <AuthContext>
      <App />
    </AuthContext>
  </React.StrictMode>
);

Answer 2

一個與另一個無關。 問題是AuthContext沒有任何RouterProvider屬性，您嘗試使用的代碼也沒有實際使用 React context Provider組件和值。

只需使用AuthContext.Provider組件包裝App組件並確保傳遞上下文值。

例子：

<AuthContext.Provider value={{ ..... }}>
  <App />
</AuthContext.Provider>