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

Question

我收到客户的请求，要求在我们的 React 应用程序中实现深度链接，点击链接会将他们直接带到已安装的应用程序(可能到某个点，但还不确定)。

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

谷歌搜索后，我只能真正找到有关 react-native 或 react-navigation 深度链接的引用。

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

Answer 1

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

在现代 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 中，路由是在框架本身中实现的，如果使用深度链接，则需要根据应用的部署方式进行不同的设置。