迹忆客 专注技术分享

要解决错误“Export 'useHistory' was not found in react-router-dom”，请改用 useNavigate 钩子，例如 const navigate = useNavigate()。 该钩子返回一个函数，允许我们以编程方式导航。

// 👇️ import useNavigate
import {useNavigate} from 'react-router-dom';

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

  const handleClick = () => {
    // 👇️ navigate programmatically
    navigate('/about');
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

在 React Router 版本 6 中，useHistory() 钩子被 useNavigate() 取代。

useNavigate 钩子返回一个函数，让我们以编程方式导航，例如 提交表格后。

我们传递给 navigate 函数的参数与 <Link to="/about"> 组件上的 to 属性相同。

如果想使用与 history.replace() 方法等效的方法，请将 options 参数传递给 navigate 函数。

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

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

  const handleClick = () => {
    // 👇️ replace set to true
    navigate('/about', {replace: true});
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

当 options 对象的 replace 属性设置为 true 时，历史堆栈中的当前条目将被新条目替换。

换句话说，导航到新路由不会将新条目推送到历史堆栈中，因此如果用户单击后退按钮，他们将无法导航到上一页。

这很有用，例如，当用户登录时 - 我们不希望他们能够单击后退按钮并返回到登录页面。

或者，如果我们有一个重定向到不同页面的路由 - 我们不希望用户单击后退按钮并再次重定向。

我们还可以使用增量调用导航函数以返回历史堆栈，例如 navigate(-1) 与点击后退按钮相同。