posts/2021/03/file-system-routes-multi-source-mdx/

[utterances-bot]

posts/2021/03/file-system-routes-multi-source-mdx/

In this post I'm going to provide an example of how to use Gatsby's File System Route API to source MDX files from multiple locations…

https://paulie.dev/posts/2021/03/file-system-routes-multi-source-mdx/

[leokolt]

Hello. I use your code, but it doesn't work for me if I specify this -

<Fragment>
      <Link to="/">Back</Link>
      {templates[variant] ? templates[variant] : null}
    </Fragment>

It just outputs the Back link and that's it. If I menu the code to this -

<Fragment>
      {templates.posts ? templates.posts : templates.projects }
    </Fragment>

Then only the post template is output. What could be the problem?

[PaulieScanlon]

Hey @leokolt, you'll probably need to catch all references to <a> and then based on the href you can determine whether it's an actual <a> or a <Link>

const components = {
  a: ({ href, children }) => {
    // If it's an external url, use <a> and target _blank
    if (href.match(/^(http|https|mailto):/g)) {
      return (
        <a href={href} target="_blank" rel="noreferrer">
          {children}
        </a>
      );
    }
    // if it's a jumplink #, use Link which will fires an anchorScroll in gatsby-browser
    if (href.match(/#/gi)) {
      return <a href={stripLeadingSlash(href)}>{children}</a>;
    }
    // if it's anything else, use Link
    return <Link to={href}>{children}</Link>;
  },
}

<MDXProvider components={components}>
   ...
</MDXProvider>