尝试导入错误：“useHistory”未从“react-router-dom”导出

在 react-router-dom v6 中，useHistory() 被 useNavigate() 替换。

您可以使用：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

然后用 useNavigate 替换 useHistory

const navigate = useNavigate();

然后将 history.push('/path') 替换为 navigate('/path')

将 history.replace('/path') 更改为 navigate('/path', { replace: true })

想要在 push/navigate 中使用 state，请执行 navigate('/path', { state: { name:'Xyz' }})

没有一个答案实际上提到如何复制以前可从 v5 useHistory 挂钩但在 v6 中不再可用的方法，例如 goBack、goForward、go。以下示例取自 migration guide：

使用 useHistory 钩子中的方法 React Router v5 应用程序：

// This is a React Router v5 app
import { useHistory } from "react-router-dom";

function App() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        Go 2 pages back
      </button>
      <button onClick={goBack}>Go back</button>
      <button onClick={goForward}>Go forward</button>
      <button onClick={() => go(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

这是使用来自 useNavigate 挂钩的导航方法的 v6 等效应用程序：

// This is a React Router v6 app
import { useNavigate } from "react-router-dom";

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        Go 2 pages back
      </button>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}

在 v6 中，useHistory 被 useNavigate 取代。

只需将 useHistory 名称替换为 useNavigate，或按照以下 3 个简单步骤操作。

从 'react-router-dom' 导入 { useNavigate } ；在文件的顶部。常量导航 = useNavigate();在你的函数中定义。导航（“/路径名”）；重定向到您的路径。

我将 react-router-dom 的版本升级为

5.2.0

它现在正在工作。

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

const navigate = useNavigate();

const confirm = (e) => {
    navigate.push('/')
}

如果你必须坚持使用最新的 react-router-dom v6.0.0，那么将 useHistory 替换为 useNavigate。否则，将您的 react-router-dom 降级到 v5.2.0 并且您的代码可以正常工作。

在 react-router-dom v6 中，useHistory() 函数被 useNavigate() 取代。

常量导航 = useNavigate();

导航（“/登录”）

react-router-dom v5 useHistory，但在 v6 中您应该使用 useNavigate 挂钩

用法：

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;