Gatsby Link 和 React Router Link 有什么区别？答案

【问题标题】：What is the difference between Gatsby Link and React Router Link?Gatsby Link 和 React Router Link 有什么区别？
【发布时间】：2017-10-11 07:24:07
【问题描述】：

我有一个网站，其中包含通过 2 个不同路径路由的 2 个组件，并且彼此链接。当我使用 react router Route / Link 来实现这些 links 时，webpack 最终构建的只有 1 个 html 页面和 javascript 应用程序包。当我改用 Gatsby Link 时，我看到两个 html 页面都生成了，但是每个页面的行为仍然像单页应用程序（即单击链接不会导致对服务器的请求以获取另一个页面，它是只是动态渲染）。

那么，这两种页面链接技术有什么区别？
如果 Gatsby Link 的工作方式与 react-router Link 相同，那么使用 Gatsby Link 有什么意义？
在同一个网站上同时使用两者有什么影响？例如。应用程序动态部分的路由链接和帮助页面等静态页面的 Gatsby 链接。

注意：这是问题Clarification on Gatsby page load network request 的延续，但涉及的领域略有不同。

【问题讨论】：

标签： react-router gatsby

【解决方案1】：

Gatsby Link 是 react-router-dom Link 组件的必需包装器。两者的工作方式相同，但 Gatsby 的版本增加了预取，并防止路由转换，直到下一页的资源完成加载。

如果你使用 React Route <Link>，事情会以奇怪的方式中断。

【讨论】：

谢谢。我是新来的。您能否解释一下“自动替换”和“服务人员”是什么？另外，为什么 Gatsby-Link 是未来的证明，而路由器链接却不是？
NavLink 增强了 Link，而 Gatsby-Link 则利用了两者。 Service Worker 是浏览器在后台执行的脚本，即使网页没有加载。

【解决方案2】：

文档状态：

gatsby-link 是 react-router 中组件的包装器。它会自动为 url 添加前缀并处理预取。

gatsby-link 自动检测是使用普通的还是基于你传递的道具。

【讨论】：