react-router-dom报错Cannot read property 'push' of undefined如何解决

• react-router-dom 的所有路由相关API（包括useHistoryHook）必须在<BrowserRouter>包裹的子组件树内调用，才能正常获取路由上下文
• 你当前代码中<Header>组件放在<BrowserRouter>外层渲染，调用useHistory()无法拿到上下文对象，返回值为undefined，调用push方法时触发报错

将<BrowserRouter>提升到App组件根节点，包裹所有用到路由能力的组件，修改后App.js代码如下：

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

兼容react-router v6版本注意事项 #

如果你使用的是v6及以上版本的react-router-dom，useHistory已被废弃，需要替换为useNavigate，Header组件对应修改为：

import { useNavigate } from 'react-router-dom';

const Header = () => {
  const navigate = useNavigate();
  const handleClick = () => navigate("/create-project");
  return (
    <>
      <div>Projects</div>
      <div>
        <button onClick={handleClick}>Create +</button>
      </div>
    </>
  );
};

内容的提问来源于stack exchange，提问作者devb