Easy way to display internal and external links in gatsby

Question

I am making my website portfolio and I have created a Navbar component with links to home page, project page and blog page. The Home page and blog page are internal links while the projects link is an external link.

Now the way I have this setup is like this:

import * as React from 'react';
import { Link, useStaticQuery, graphql } from 'gatsby';
import Icon from '../images/icon.svg';

const Navbar = ({pageTitle}) => {

    const data = useStaticQuery(graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `);

    const menu = [
        { title: 'HOME', path:'/' },
        { title: 'PRØJECTS', path: 'https://github.com/chukkyiii?tab=repositories' },
        { title: 'BLØG', path: '/blog' }
    ]

    return (
      <main>
        <title>
          {pageTitle} | {data.site.siteMetadata.title}
        </title>
        <div>
          <div className="mx-auto mb-9 flex items-center justify-between max-w-2xl ">
            <Icon className="w-12 h-12 p-1 rounded-full ring-2 ring-gray-300 dark:ring-gray-500" />
            <nav>
              <ul className="flex">
                {menu.map((item) => (
                  <li key={item.title}>
                    <Link to={item.path} className="pl-8 hover:text-amber-500">
                      {item.title}
                    </Link>
                  </li>
                ))}
              </ul>
            </nav>
          </div>
        </div>
      </main>
    );
}

export default Navbar;

So I don't have to repeat the same line of code again, I just used a Link which works but it gives me a warning, is there a different way I can do this without the warning?

the warning it gives:

react_devtools_backend.js:4026 External link https://github.com/chukkyiii?tab=repositories was detected in a Link component. Use the Link component only for internal links. See: https://gatsby.dev/internal-links
...

Answer 1

You can easily customize your menu array to display a new property to base your loop on:

const menu = [
    { title: 'HOME', path:'/', isInternal: true },
    { title: 'PRØJECTS', path: 'https://github.com/chukkyiii?tab=repositories', isInternal: false },
    { title: 'BLØG', path: '/blog', true }
]

Then:

{
  menu.map((item) => {
    if (item.isInternal) {
      return (
        <li key={item.title}>
          <Link to={item.path} className="pl-8 hover:text-amber-500">
            {item.title}
          </Link>
        </li>
      );
    }
    return (
      <li key={item.title}>
        <a href={item.path} target="_blank">
          {item.title}
        </a>
      <li key={item.title}>
    );
  });
}

You can even do a ternary condition inside the return to take advantage of the <li> wrapper:

{
  menu.map((item) => (
    <li key={item.title}>
      {item.isInternal ? (
        <Link to={item.path} className="pl-8 hover:text-amber-500">
          {item.title}
        </Link>
      ) : (
        <a href={item.path} target="_blank">
          {item.title}
        </a>
      )}
    </li>
  ));
}

Link component is intended to use only for internal navigation, somethign what happens in the scope of your application and React/Gatsby can be aware of. If the link points to any external source (like GitHub in this case), you need to use the standard anchor (which in fact is what it renders the Link component).

The same approach of adding the isInternal attribute (which personally I find it more succinct) can be done in the same way using a regular expression or similar, just checking how the path is.