Gatsby.js: 在 Markdown 中预处理相对路径链接

Question

我想知道是否有办法，可能通过为 gatsby-transformer-remark 创建一个插件，可以将相对路径 links 转换为就像它们在使用 <Link> 来自 gatsby-link.

例如，假设我在降价文件中有以下内容：

# Here is a Header

Check out my about page:

[About](/about)

如果我导入此 markdown 并将其显示为：

<div dangerouslySetInnerHTML={{ __html: whatever.childMarkdownRemark.html }} />

然后当 "About" link 被点击时，它打破了单页应用程序的魔力。

有什么办法可以避免这种情况吗？提前致谢。

Answer 1

有一个名为 gatsby-plugin-catch-links 的插件。

安装它：

npm install --save gatsby-plugin-catch-links

将其添加到您的 gatsby-config.js 文件中：

// In your gatsby-config.js
plugins: [`gatsby-plugin-catch-links`];

您可以在 https://using-remark.gatsbyjs.org/

找到关于如何使用 Gatsby 的评论的非常好的文档

关于你的问题，我找到了 this article here。