reactjs - 无法读取 react-router-dom 中未定义的属性“推送”

Question

我正在尝试从子组件路由并面临错误

父 App.js ：-

    class App extends React.Component {
  render() {
    return (
      <div >
        <Header />
        <div >
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={DashBoard} />
              <Route exact path="/create-project" component={CreateProject} />
            </Switch>
          </BrowserRouter>
        </div>
      </div>
    );
  }
}

这是我的 Header.js ：-

  const Header = () => {
  const history = useHistory();
  const handleClick = () => history.push("/create-project");
  return (
    <>
      <div>Projects</div>
      <div>
        <button onClick={handleClick}>Create +</button>
      </div>
    </>
  );
};

尽管阅读了几个答案，但我无法调试

标签： reactjsreact-router-dom

Answer 1

您的 Header 组件位于 BrowserRouter 之外，因此像 useHistory 这样的 react-router 钩子在其中不起作用。

更好的：

    class App extends React.Component {
  render() {
    return (
      <div >
        <div >
          <BrowserRouter>
        <Header />

            <Switch>
              <Route exact path="/" component={DashBoard} />
              <Route exact path="/create-project" component={CreateProject} />
            </Switch>
          </BrowserRouter>
        </div>
      </div>
    );
  }
}