React Router v6中useHistory导出失败问题求助

React Router从v6版本开始，已经移除了useHistory钩子，改用useNavigate来实现页面导航功能，这就是你在v6.11.2版本里找不到useHistory的原因。按照下面的步骤修改代码即可解决问题：

• 替换导入语句
  将原来的导入代码：

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

  替换为：

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

• 初始化导航对象
  把初始化history的代码：

  const history = useHistory();
  

  改成：

  const navigate = useNavigate();
  

• 修改跳转调用逻辑
  将点击事件里的history.push("/")替换为navigate("/")，最终代码如下：

  <StyledHeader onClick={() => navigate("/")}>Crypto Tracker</StyledHeader>
  

额外补充：如果需要实现类似history.replace的替换历史记录功能，可以这样写：

navigate("/", { replace: true });

如果需要后退/前进页面：

• 后退一页：navigate(-1)
• 前进一页：navigate(1)

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