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

Posted 2023-02-21

【中文标题】如何在 react-router-dom v6 中返回上一条路线

【英文标题】：How to go back to previous route in react-router-dom v6

【发布时间】：2021-05-03 00:43:50

【问题描述】：

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

history.goBack()

如何使用 react-router-dom 的 v6 实现这一目标？

【问题讨论】：

github.com/ReactTraining/react-router/blob/dev/docs/… 看起来可能在useNavigate

【参考方案1】：

试试这个方法

import  useNavigate  from 'react-router-dom';

function YourApp() 
  const navigate = useNavigate();

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

【讨论】：

这真的很有帮助。谢谢

【参考方案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>
    </>
  );

【讨论】：

我已经尝试过了，但在 v6 中 useHistory 不在 react-router-dom 中

我的错。编辑我的 v6 答案。

【参考方案3】：

在旧版本的 react-router-dom 中存在 pop 函数

您可以通过以下方式联系他们：

const history = useHistory();
history.pop()

现在在 v6 中，您可以使用函数 useNavigate

const navigate = useNavigate();
navigate(-1) // you will go one page back
navigate(-2) // you will go two pages back