[MDX] Why don't internal links in MDX aren't rendered with Gatsby <Link />

[dbismut]

Description

When using gatsby-plugin-mdx, all links are rendered with the <a /> tag, regardless if the link points to an internal or external page.

Steps to reproduce

Set up gatsby-plugin-mdx. Try the code below.

Go to [docs](/docs/)

Go to [Github](https://github.com)

Go to [AnchorLink](#Title)

### Title

https://codesandbox.io/s/ecstatic-johnson-jm18p

Expected result

The first link is internal and should be rendered using Gatsby <Link />. Clicking on the link shouldn't trigger a page reload.

Actual result

All links are rendered with <a />. The first link, while internal, doesn't use Gatsby <Link />. Clicking on it reloads the page.

Proposed solution

It might be a bit naive, but wouldn't this work?

import { Link } from 'gatsby'
import { MDXProvider as BaseMDXProvider } from '@mdx-js/react'

const components = {
  a: ({ href, ...p }) => {
    // Link don't support external links or anchors
    const isLink = href.indexOf('http') === -1 && href.indexOf('#') !== 0
    return isLink ? <Link to={href} {...p} /> : <a href={href} {...p} />
  }
}

export function MDXProvider({ children, components }) {
  return (
    <BaseMDXProvider components={{ ...mdxComponents, ...components }}>
      {children}
    </BaseMDXProvider>
  )
}

Environment

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.4 - ~/.nvm/versions/node/v12.18.4/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.4/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 87.0.4280.40
    Firefox: 81.0.1
    Safari: 14.0
  npmPackages:
    gatsby: ^2.24.91 => 2.24.91 
    gatsby-plugin-mdx: 1.2.52 => 1.2.52 

[LekoArts]

You can use https://www.gatsbyjs.com/plugins/gatsby-plugin-catch-links/ to handle this :)

[dbismut]

I had no idea. Thanks a lot!

[pelikhan]

@LekoArts This plugin should be a default for mdx. Basically out of the box behavior of gatsby-plugin-mdx is to render to and defeat the cool in-page rendering.