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

Question

我现在有一个" go back ";当前在onClick处理程序中使用router.back()返回到上一页的页面上的链接，如果当前页面在我的网站内导航到，这通常是有效的，但如果页面直接导航到(例如，通过书签或粘贴的URL)，那么我希望"返回"。链接做一个router.push('/')来返回我的主页。我不知道如何确定以前的浏览器历史URL是否在我的网站之外做router.push()而不是router.back()。有人有什么建议吗?

Answer 1

您可以使用window?.history?.state?.idx来检查最近访问页面的状态索引

如果window?.history?.state?.idx > 0，这意味着用户一直在浏览网站，你可以"安全"地浏览。使用router.back(…)。如果url直接粘贴到浏览器中，该值将等于0。

Answer 2

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

Answer 3

不幸的是，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()。