Question

我在我的项目中使用了 useContext 和 react-routers，其结构如下：

<AppProvider>
  <Router>
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
  </Router>
</AppProvider>

我想从我的上下文文件导航到一个路径，但我不能，因为它在路由器之外。实现这一目标的最佳方法是什么？

我想要的（在 context.js 的 AppProvider 组件中）：

let history = useHistory()

useEffect(() => {
  const unsubscribe = projectAuth.onAuthStateChanged((authUser) => {
    if (authUser) {
      history.push("/about");
    }
  });
  return unsubscribe;
}, []);

Answer 1

您可以重构您的布局，用 AppProvider 包裹 Router，然后一切都会正常，因为 AppProvider 将在您使用 useHistory< 时获得路由器使用的历史对象/p>

<Router>
  <AppProvider>
    <Switch>
      <Route exact path="/">
        <Home />
      </Route>
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
  </AppProvider>
</Router>

反应路由器和上下文

1 个答案: