Question

我当前正在使用 React 和 GatsbyJS 建立一个站点，并且如果前一页属于同一域，则尝试有条件地添加导航window.history.back(-1);。

一个例子是

navigateBack = () => {
  if (window !== undefined) {
    window.history.back(-1);
  }
};

请注意，if (window !== undefined)允许使用window，而无需服务器端渲染。

在运行此功能之前，如何检查上一页。

例如，用户从我要使用navigate('/stories/')的外部链接导航，否则，如果用户来自内部页面，即'/stories/2/'，我希望他们使用{{1}返回}

Answer 1

盖茨比有一个api，可以告诉您以前的位置。也许您可以将其与document.referrer一起使用，例如@ATT建议检查以前的URL是否来自同一域。

// gatsby-browser.js

exports.onRouteUpdate = ({ location, prevLocation }) => {
  if (prevLocation || document.referrer.includes(SITE_NAME)) {
    // same domain
  }
}

或者，如果您想在React组件中拥有以前的位置信息，请查看对this other gatsby question的回答。

旁注：document.referrer将为空白（""，而不是null或undefined（如果没有引荐来源（网站省略引荐或直接））

Answer 2

我必须通过检查以确保存在历史记录，然后验证可以在引荐来源网址中找到当前主机来解决此问题。如果找到了这些，那么我知道它们来自我的站点，因此我返回；否则，我将它们导航到其他地方。

if(window.history.length > 1 && 
document.referrer.indexOf(window.location.host) !== -1) {
  window.history.back();
}
else {
  <do something else>
}

Answer 3

您可以通过document.referrer获取上一页的网址。

Answer 4

如果您使用的是React Router，则可以使用以下代码段。

if(browserHistory.getCurrentLocation().key === null) {
   browserHistory.push(customRoute); // push to custom route
} else {
   browserHistory.go(-1); // go back normally
}

Answer 5

此处回答了一个在窗口为“新”且引用者可能不可靠时也能工作的版本https://stackoverflow.com/a/68161306/1348517

如果上一页不是来自同一域，则有条件地使用window.history.back（-1）

5 个答案: