React 中的深度链接，无需 React-Native 或 React-Navigation

Question

我收到客户的请求，要求在我们的 React 应用程序中实现深度链接，通过单击链接将它们直接带入已安装的应用程序（可能到达某个点，但尚未确定）。

据我了解，反应本机和反应导航都将其作为它们提供的“链接”中的功能集的一部分来处理。然而，仅仅为了深度链接而导入一个框架似乎有点过分（也许不是）。

在谷歌搜索后，我只能真正找到有关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 中，路由是在框架本身中实现的，如果使用深度链接，则需要不同的设置，具体取决于应用程序的部署方式。