我如何将 React Context 与 react-router-dom 一起使用？

Question

AuthContext:

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

App.js:

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

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

export default App;

I try to put <RouterProvider> in AuthContext like this:

<AuthContext.RouterProvider router={privateRoute} />

and like this:

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

None of these options worked. What am I doing wrong?

Answer 1

you are trying to use the AuthContext with the RouterProvider but AuthContext have no property or component called RouterProvider .

To use AuthContext in combination with the RouterProvider , you will need to wrap the RouterProvider component in a component that consumes the AuthContext 's value ( ie useContext(AuthContext) ).

Here a snippet to help you out... In this we are using AuthContext value to detemine the value of routes and then use it with RouterProvider

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

inside and you need to wrap the App component inside AuthContext like...

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

Answer 2

One has nothing to do with the other. The issue is that AuthContext doesn't have any RouterProvider property nor is the code you are trying to use actually using a React context Provider component and value.

Just wrap the App component with the AuthContext.Provider component and ensure a context value is passed.

Example:

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