App.js 如何将历史记录传递给 BrowserRouter 内的 Nav 组件

Question

我在 App.js 文件中有以下代码：

<BrowserRouter>
    <Nav />
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/barium" component={Barium} />
        <Route path="/gamma" component={Gamma} />
        <Route path="/h2spp" component={H2S} />
        <Route path="/texas" component={TexasGasEst} />
        <PrivateRoute path="/exam" component={Exam} />
        <PrivateRoute path="/profile" component={Profile} />
        <PrivateRoute path="/students" component={Students} />
        <Route path="/*" component={Home} />
    </Switch>
    <Footer />
</BrowserRouter>

在 Nav 组件中，我有一个登录模式。我想通过导航组件将 history 道具传递给登录模式，以便在登录后立即创建 history.push

Answer 1

因为 <Nav> 是 <BrowserRouter> 的后代，您可以使用其中的 useHistory 挂钩来访问历史实例：

import { useHistory } from "react-router-dom";

function Nav() {
  const history = useHistory();

  function onAfterLogin() {
    history.push("/welcome");
  }

  // ...
}

App.js 如何将历史记录传递给 BrowserRouter 内的 Nav 组件

How to pass history to the Nav component inside the BrowserRouter in App.js

reactjs

router

history