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

7vhp5slm 于 2023-01-01 发布在 Java

关注(0)|答案(2)|浏览(192)

身份验证上下文：

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;

我试着把<RouterProvider>放在AuthContext中，如下所示：

<AuthContext.RouterProvider router={privateRoute} />

就像这样

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

这些选择都不起作用我做错了什么？

JavaScript

来源：https://stackoverflow.com/questions/74954604/how-can-i-use-react-context-with-react-router-dom

2条答案

按热度按时间

bxjv4tth1#

问题是AuthContext没有任何RouterProvider属性，您尝试使用的代码实际上也没有使用React上下文Provider组件和值。
只需用AuthContext.Provider组件 Package App组件，并确保传递上下文值。
示例：

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

赞(0）回复(0）举报 2023-01-01

ix0qys7i2#

您正尝试将AuthContext与RouterProvider一起使用，但AuthContext没有名为RouterProvider的属性或组件。
要将AuthContext与RouterProvider结合使用，您需要将RouterProvider组件 Package 在使用AuthContext值的组件中（* 即useContext（AuthContext）*）。
这里有一个代码片段可以帮助您...在这里，我们使用AuthContext value来确定routes的值，然后将其与RouterProvider一起使用

const App = () => {
  const auth = useContext(AuthContext);
  const routes = auth.isLoggedIn ? privateRoute : publicRoute;

  return (
    <RouterProvider router={routes} />
  );
};

export default App;

并且您需要将App组件 Package 在AuthContext中，例如...

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

赞(0）回复(0）举报 2023-01-01

我来回答

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

2条答案

相关问题

热门标签

最新问答