反应路由器和上下文

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 将在您使用 [=14= 时获取 Router 使用的历史对象]

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

反应路由器和上下文

React router and context

reactjs

react-router

react-router-dom

react-context