reactjs 我可以检测使用Next.js router.back()是否会离开我的站点并改为执行router.push('/')吗?

pxy2qtax  于 2022-11-22  发布在  React
关注(0)|答案(3)|浏览(198)

我目前有一个“返回”链接的网页上,目前使用路由器。返回()返回到上一页,如果当前页是在我的站点中导航到的,则此操作通常有效,但如果该页是直接导航到的(比方说,通过书签或粘贴的网址),然后我想“回去”链接做路由器。推(“/”)返回到我的主页。我不知道如何确定以前的浏览器历史记录URL是否在我的网站之外,以执行router.push()而不是router.back()。有人有什么建议吗?

xnifntxz

xnifntxz1#

您可以使用window?.history?.state?.idx来检查表示最近访问的页面的状态索引。
如果是window?.history?.state?.idx > 0,表示使用者已经在网站上浏览,您可以“安全地”使用router.back(...)。如果URL是直接贴到浏览器中,这个值会相等0。

ukdjmx9f

ukdjmx9f2#

你可以 checkout document.referrer并检查URL的主机名是否与你的主机名匹配。如果匹配,你可以安全地使用router.back()。如果不匹配,你可以使用router.push('/')

bqf10yzr

bqf10yzr3#

不幸的是,document.referrer不能正确地与Next一起工作。首选的方法是使用会话存储来保存以前和当前的路径,方法是在_app.js中使用useEffect钩子

...

  const storePathValues = () => {
    const storage = globalThis?.sessionStorage;
    if (!storage) return;
    // Set the previous path as the value of the current path.
    const prevPath = storage.getItem("currentPath");
    storage.setItem("prevPath", prevPath);
    // Set the current path value by looking at the browser's location object.
    storage.setItem("currentPath", globalThis.location.pathname);
  }

 useEffect(() => storePathValues, [router.asPath]);

...

这样,您就可以评估用户来自哪个页面,然后使用router.back()或router.push()。

相关问题