深度链接（Deeplinking）：如何在React应用中打开深度链接

这个问题我之前也碰到过！React Router的history.push()确实只负责应用内部的路由跳转，它会自动把你传入的URL拼接在当前应用的基础路径后面，所以自然没法处理像<DEEP_LINK_SCHEME>://someInfor?param这种自定义scheme的深度链接。给你几个靠谱的替代方案：

方案1：直接用window.location.href跳转 #

这是最直接简单的方式，让浏览器原生处理深度链接：

const deepLink = "<DEEP_LINK_SCHEME>://someInfor?param";
window.location.href = deepLink;

浏览器会自动识别这个自定义scheme，直接唤起对应的应用或者执行链接的预设逻辑。

方案2：用window.open()灵活控制打开方式 #

如果你需要在新窗口/标签页打开，或者有更灵活的跳转控制需求，可以用这个方法：

const deepLink = "<DEEP_LINK_SCHEME>://someInfor?param";
// _self 表示在当前窗口打开，换成 _blank 就是新标签页
window.open(deepLink, "_self");

⚠️ 注意：如果不是用户主动触发的操作（比如按钮点击），部分浏览器可能会拦截window.open()的弹窗，所以尽量把这个逻辑绑定在用户交互事件里。

方案3：添加降级处理（优化用户体验） #

有时候用户设备上没有安装对应的应用来处理这个深度链接，你可以加个降级逻辑，比如跳转到网页版或者提示用户安装：

function openDeepLink() {
  const deepLink = "<DEEP_LINK_SCHEME>://someInfor?param";
  const fallbackUrl = "/fallback-page"; // 替换成你的降级页面地址

  const startTime = Date.now();
  // 尝试打开深度链接
  window.location.href = deepLink;

  // 定时器检查是否唤起成功
  setTimeout(() => {
    // 如果1秒内页面没切换（说明没唤起应用），执行降级逻辑
    if (Date.now() - startTime < 1000) {
      window.location.href = fallbackUrl;
    }
  }, 800);
}

这个逻辑的核心是：如果深度链接成功唤起应用，浏览器会切换到后台，定时器的回调就不会触发；如果没唤起成功，页面还停留在当前应用，就会自动跳转到降级页面。

内容的提问来源于stack exchange，提问作者therealcobb