没有React-Native或React-Navigation的React中的深层链接

问题描述

我有一个客户的请求,要求在我们的React应用程序中实现深层链接,通过该链接,单击链接会将其直接带入已安装的应用程序中(可能到某个特定点,但尚不确定)。

据我了解,react-native和react-navigation都将其作为它们提供的“链接”内功能集的一部分来处理。但是,导入仅用于深层链接的框架似乎过多(也许不是)。

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

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

解决方法

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

在现代SPA中,例如使用React,SPA通常会自己处理导航。您需要使用浏览器的历史记录API。这是因为您的SPA只是一个带有一堆js代码的单个index.html,因此它是虚拟的,每个页面都是由您的应用构建的。为了不重新发明轮子,可以更方便地使用一些库,例如react-router-dom

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

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

当用户请求该页面时,服务器会将请求“重定向”到index.html,而我的react-router-dom将根据该路径确定要呈现的“ PageComponent”。

因此,您可以使用浏览器的History API自己在应用程序中实现路由,但我想使用库可能会更容易。但这是你的电话。

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

,

深层链接主要由Apple和Google服务器端

处理

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

React-native提供了扩展功能,可在移动应用程序内进行深层链接,但普通的Web应用程序无需在那里进行实施。在您的网络应用中使用通用链接或Google特定链接作为标准链接以启用深度链接