如何回到 react-router-dom v6 中的上一条路线

Question

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

history.goBack()

我怎样才能做到这一点与V6的反应路由器-DOM？

Answer 1

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

Answer 2

2023 年 12 月更新：

看来history.state.idx方法不再有效，目前可以使用history.length来实现，如下所示：

if (window.history?.length) {
   router.back();
} else {
   router.replace(href || "/");
}

如果您支持旧系统，则将两者合并可能会有所帮助，如下所示：

if (window.history?.length || window.history.state?.idx) {
   router.back();
} else {
   router.replace(href || "/");
}

原来的：

以防万一有人像我一样尝试向后导航或导航到其他地方（如果您无法向后导航（例如在新选项卡中打开的链接）），似乎没有任何方法可以使用反应路由器验证历史记录在 v6 中。然而，如果您位于历史堆栈的开头，您似乎可以访问 window.history.state ，它的 idx 属性为零。

它可能存在一些我没有遇到的问题，但它对我有用：

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

// ...

const navigate = useNavigate();

// ...

if (window.history.state && window.history.state.idx > 0) {
    navigate(-1);
} else {
    navigate('/', { replace: true }); // the current entry in the history stack will be replaced with the new one with { replace: true }
}

Answer 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

Answer 4

试试这个方法

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

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

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

Answer 5

在react-router Links v6中还有另一种使用增量（数字）的方法：

const BackButton = () => {
  return (
    <Link to={-1}>
      Back
    </Link>
  );
};

不幸的是，打字稿中存在类型错误，链接组件不接受数字，但它仍然有效。