Catching markdown links

Posted on 29th January 2020

One of the nice things about using Gatsby/React is how fast it can be when navigating withing the confines of the app. You don't get that janky screen refreshing where things unload for the briefest of seconds.

I noticed yesterday, too late to do anything about it, that while my page to page, and page to post navigation was nice and smooth, my post to post and post to page navigation was not.

After a little reading I found the culprit to be the markdown files I am using to create my blog posts. Because you don't write in the Link component tag like you would in a normal jsx file, all the transformer plugin does when it creates the page for you is turn that markdown syntax into an A tag.

There's a plugin that can help with that though - gatsby-plugin-catch-links - which will detect any internal links inside your markdown files and ensure that they're treated as if they were using the navigate method from gatsby-link.

I just tried it now going back and forth between a couple of posts and it has helped smooth that experience out massively. Obviously there's the caveat that this does not work for external links in your page, they'll still be as slow/fast as they ever were.

Enjoyed this post? Feel free to share it with your audience using the links below:

Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.


©2022 Pursuit of Loot. All rights reserved.