如何在 react-router-dom v6 中返回上一条路线

Question

在早期版本中，我们可以使用 history 回到 以前的路线。

 history.goBack()

我如何使用 react-router-dom v6 来实现这一点？

原文由 Hamza Khursheed 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试这个方法

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

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

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
    </>
  );
}

原文由 Pedro Cunha 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在 V6 中，

 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>
    </>
  );
}

原文由 Sanish Joseph 发布，翻译遵循 CC BY-SA 4.0 许可协议