如何在不意外离开我的网站的情况下使用 useNavigate 上一页

Question

问题：我正在尝试使用 useNavigate(-1) 转到上一页，但我只是实现了一种方法，让人们通过粘贴的链接（或社交媒体）到达我的 SPA，因此，当用户尝试返回时，他们会离开我的网站 xP。

进程：我可以使用useNavigate("/")，但这会使我的页面滚动到顶部并且我想保留以前的用户位置，我宁愿不使用滚动位置的状态，但是如果没有其他可能或简单的...

上下文：是一个类似于ifood的餐厅菜单页面，这个问题出现在产品页面，我想回到产品列表。

我想要实现的目标：某种方式来检查上一页是否在我的域之外并且不去那里，替换为我的根。

ps。我正在使用"react-router-dom": "^6.0.0-beta.0"

Answer 1

在早期版本的 React Router DOM 中，there was a smarter goBack method，但在现代版本（包括 v6 测试版）中，您必须使用 location.key is "default" for the initial entry to the app's history。

我创建了一个npm package that encapsulates this functionality in a simple React hook。

安装回用

npm install use-back

用法

import {useBack} from "use-back";

const BackButton = () => {
  const {hasBack, handleBack} = useBack();
  return (
    <button type="button" onClick={handleBack}>
      {hasBack ? "Go Back" : "Go Home"}
    </button>
  );
};

CodeSandbox Demo

源代码

源代码基本上如下，您也可以将其包含在您的应用程序中。

const MagicalBack = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const hasPreviousState = location.key !== "default";

  const handleClick = () => {
    if (hasPreviousState) {
      navigate(-1);
    } else {
      navigate("/");
    }
  };

  return (
    <button type="button" onClick={handleClick}>
      {hasPreviousState ? "Go Back" : "Go Home"}
    </button>
  );
};

CodeSandbox Demo