如果我来自外部应用程序，检测反应路由器中的先前路径？

Question

我正在使用反应路由器。我想检测我来自的上一页（外部应用程序示例：从 gmail 到我的应用程序）。我在我的上下文中有路由器。但是，我在路由器对象上看不到任何属性，例如“先前路径”或历史记录。我该怎么做？

示例 2：用户下订单，我们通过电子邮件向他们发送电子邮件确认，其中 onclick 上 view-order-details 他们被导航回我们的网络应用程序，现在如何检测他们来自哪个链接？

这是另一个更好理解的上下文

我必须在我的网络应用程序中实现一个后退按钮，当用户从电子邮件转到我的网络应用程序时，他直接导航到https://example.com/orders/{orderID}，如果我只使用props.history.goBack，它将返回到电子邮件页面。但我希望用户导航到https://example.com/dashboard。

现在你可能会说使用props.history.push('/dashboard') 这将成为静态值。如果用户在点击后退按钮时从dashboard->all-orders->orders/{orderID} 内部导航（不是来自电子邮件或外部页面），则应导航到dashboard->all-orders 页面而不是仪表板。

Answer 1

要在 React-Router 中读取历史记录，请使用与 routeComponentProps 或 useHistory 挂钩一起传递的历史记录对象。

但这也不会给你想要的东西：

1. 无法读取浏览器历史记录中的条目。浏览器目前根本不会将其暴露给 JS。 See this entry on the history API on MDN
2. 为了检测访问者来自哪个站点，您可以检查引荐来源网址。 document.referrer on MDN

一个按钮的示例，该按钮可以为内部引用者返回历史上的一步，但如果该网站是从书签或外部链接加载的，则会转到仪表板：

button.onclick - () => {
  if (document.referrer && document.referrer.length > 0 && document.referrer.startsWith('https://yoursite.com')) {
    // user came from an internal link
    window.history.goBack(1);
  }
  else {
    // user came from a bookmark or an external link
    window.location = 'https://yoursite.com/dashboard';
  }
};

HTML5 历史记录允许您回到历史上的任意点，但您无法知道该历史点的详细信息。您只能通过数字索引返回它。