How to render a Link in markdownRemark in a Gatsby project

Question

I'm working on building a markdown wiki in Gatsby.

It's based off of the gatsby-blog starter. It parses markdown files in the /content/wiki/ with markdownRemark to display as html pages.

In a component I could of course write out a simple text link as:

<Link to={`/Some_File`}>Some File</Link>

But in my markdown files, links are simply written as:

[Some File](Some_File)

The problem is that when adding text links to the markdown files it causes a page refresh when the link is clicked.

Is there any way to render a router Link within a markdown file?

Answer 1

gatsby-plugin-catch-links seems to be the best way to achieve this (also confirmed in gatsby discord channel).

From the readme:

Installation

npm install gatsby-plugin-catch-links

Usage

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