Gatsby.js: Preprocessing Relative Path Links in Markdown

Question

I'm wondering if there's a way, possibly by creating a plugin for gatsby-transformer-remark, that relative-path links could be converted to act as if they were using <Link> from gatsby-link.

For instance, say I have the following in a markdown file:

# Here is a Header

Check out my about page:

[About](/about)

If I import this markdown and display it with:

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

Then when the "About" link is clicked it breaks the single-page app magic.

Is there any way to prevent this? Thanks in advance.

Answer 1

There is a plugin for this called gatsby-plugin-catch-links.

Install it:

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

Add it in your gatsby-config.js file:

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

You can find a very nice documentation on how to use remark with Gatsby at https://using-remark.gatsbyjs.org/

For your question, I found this article here.