没有 React-Native 或 React-Navigation 的 React 深度链接

Deep Linking in React without React-Native or React-Navigation

我有一个客户请求在我们的 React 应用程序中实现深度 linking,点击 link 将直接进入已安装的应用程序(可能到某个点但不确定在那上面)。

据我了解,react-native 和 react-navigation 都将此作为它们提供的“链接”中的功能集的一部分来处理。然而,仅仅为了深度 linking 导入一个框架似乎有些过分(也许不是)。

谷歌搜索后,我只能在 react-native 或 react-navigation 上真正找到对深度 linking 的引用。

我最好的行动方案是什么?

Deep-linking 主要由 Apple 处理,Google server-side

https://www.adjust.com/blog/dive-into-deeplinking/

React-native 在移动应用程序中为 deep-linking 提供扩展功能,但正常 web-applications 不需要在那里实现它。使用通用链接或 Google 特定链接作为网络应用程序中的标准链接以启用深度链接

让我们先了解一些基础知识,然后就清楚了。

在现代 SPA 中,例如使用 React,SPA 自己处理导航是很常见的。您需要使用浏览器的历史记录 API。这是因为您的 SPA 只是一个 index.html 和一堆 js 代码,所以它有点虚拟,每个页面都是由您的应用程序构建的。为了不重新发明轮子,使用一些库更容易,比如 react-router-dom.

但是随后一切都按预期进行,并且您已经部署了您的应用程序。当用户想要获取一些深层页面时,比如 https://my-awesome-app.com/deep/page/1,浏览器将向服务器发送请求,询问:“服务器,请给我一个页面 1.html,在文件夹页面中,在文件夹中深的”。但是服务器没有那个文件,因为它确实有一个 index.html,因为它是一个 SPA 应用程序。然后我们需要告诉服务器 re-write 所有深层路由到索引 html,这是我在 Netlify 上托管的应用程序的示例:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

当用户请求该页面时,服务器将 'redirect' 向 index.html 请求,而我的 react-router-dom 将根据该请求确定呈现哪个 'PageComponent'路径。

因此,您可以自己在应用程序中实现路由,可能使用浏览器的历史记录 API,但我想使用库可能更容易。但这是你的决定。

另一方面,如果您的应用不是 SPA,情况可能会有所不同,因为在 NextJS 中,路由是在框架本身中实现的,如果使用深度链接,则需要不同的设置,具体取决于应用的部署方式。