react-router - Gatsby 链接和 React Router 链接有什么区别？

Question

我有一个网站，其中有 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 的延续但涉及的区域略有不同。

Answer 1

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

如果你使用 React Route，事情会以奇怪的方式崩溃 <Link> .