10

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.

dougmacklin
  • 2,560
  • 10
  • 42
  • 69

1 Answers1

15

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.

Nenu
  • 2,637
  • 1
  • 18
  • 24
  • Welp, that was easy, thanks! I'll award the bounty tomorrow (stack overflow requires a min of 1 day). – dougmacklin May 16 '18 at 07:27
  • 1
    mine didn't work. `[link](/some-link)` still reloading / open new tab – kubido Jul 14 '19 at 07:52
  • 1
    What if my internal links are links to other .md files? Like [About](/about.md). – gpbl May 17 '20 at 20:06
  • @gpbl You can link them with `[my link should be called this](../relative_path_to_md_file_from_current_file)`. You would have to remove the `.md` at the end though – Ayush Mandowara Feb 13 '21 at 14:09