gatsby-link should work as a regular anchor for off-site URLs

[tremby]

Description

It would make things simpler if I didn't have to care whether a given URL is somewhere on my website or whether it's an external link, and I could pass them to gatsby-link either way.

Steps to reproduce

Add some links with gatsby-link to a page, one with its to parameter pointing to a site-local destination, another pointing somewhere external.

Expected result

Both should function as expected: the internal one should do a react-router-driven page change, the external one should function as a regular link.

Actual result

Gatsby (or maybe the upstream react-router link?) assumes that by http://example.com I mean some page on the current website called /http://example.com, which I clearly do not, and so I get a broken link.

Environment

• Gatsby version (npm list gatsby): gatsby@1.9.232
• gatsby-cli version (gatsby --version): 1.1.41
• Node.js version: v8.9.4
• Operating System: Linux spiral 4.4.0-112-generic #135-Ubuntu SMP Fri Jan 19 11:48:36 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

File contents (if changed):

gatsby-config.js: nothing special
package.json: nothing special
gatsby-node.js: nothing special
gatsby-browser.js: not changed
gatsby-ssr.js: not changed

[altaywtf]

Hi @tremby. I know it's not a permanent or best solution but I've written a custom Link component for that, it may help you:

import React from 'react'
import GatsbyLink from 'gatsby-link'

const Link = props => {
  if (props.to.startsWith('/')) {
    return <GatsbyLink {...props}>{props.children}</GatsbyLink>
  }

  return (
    <a {...props} href={props.to}>
      {props.children}
    </a>
  )
}

export default Link

[KyleAMathews]

I'd be open to adding some simple heuristic to try to identify external links. I'm not sure there's a perfect way to do this though so our official recommendation is to handle this yourself. But we could add some heuristics for detecting links with https?:// links. remix-run/react-router#1147 has a number of samples of code. Any of you two interested in writing a PR?

[KyleAMathews]

One way of doing it is to always use <Link> when server rendering since those always turn into an <a> and then in the client, use https://github.com/mrded/is-url-external/blob/master/index.js to differentiate between links.

[tremby]

@altayaydemir: yes, in fact I already do use a component like that. It just seems it really shouldn't be necessary.

@KyleAMathews: good to hear you're open to improving things.

@altayaydemir's heuristic is no good since it'll fail on same-protocol URLs such as //external.example.com/path.

mrded/is-url-external is no good in my opinion since it only checks HTTP/HTTPS URLs and so will fail on mailto, tel, etc, which I frequently see in sites I put together.

The heuristic I've been using is

const internal = /^\/(?!\/)/.test(to);

This tests that the string starts with a slash which is not then followed by another slash. It expects any internal links to be absolute within the origin, i.e. start with a slash. It doesn't depend on window (or look at the current location/origin), and so needs to special handling for server-side/client-side detection.

I can put together a PR, probably early next week.

Before I do, feedback on whether the above regex is acceptable in the general case would be useful. In particular, it would be no good if people ever use relative URLs such as "another/page". Do they? I certainly don't. It would also be no good if people ever use full URLs within the same website including protocol/domain. Do they? Again, I certainly don't. I wonder if URLs like this, however, often come from some CMSs. (Looking at you, Wordpress.) I will check equality of the origin on the link and on window.location (when client-side) if necessary.

[KyleAMathews]

In particular, it would be no good if people ever use relative URLs such as "another/page". Do they? I certainly don't. It would also be no good if people ever use full URLs within the same website including protocol/domain. Do they? Again, I certainly don't. I wonder if URLs like this, however, often come from some CMSs. (Looking at you, Wordpress.) I will check equality of the origin on the link and on window.location (when client-side) if necessary.

Yeah... this is why I'm not sure if trying to solve this is even a good idea — the only person that knows if a link should be external or not is the one building the site. People can sometimes embed Gatsby sites within a larger site so links like /about-us/ are actually pointing to another site.

It might be simplest to just keep <Link/> as always internal and it's on the developer to use <a> when necessary — either using a regex switch or just manually switching which ones you use.

[tremby]

People can sometimes embed Gatsby sites within a larger site so links like /about-us/ are actually pointing to another site.

I had not considered this. Yes, ok, I now agree with your (and react-router's) decision. Maybe a good compromise would be to add some documentation with related suggestions? My intention is now to provide that.

[KyleAMathews]

Adding a section to gatsby-link would be great!

[tremby]

I've suggested a new chunk of documentation at #4720, as promised.

[AurelioDeRosa]

I've followed the advice provided but I have (or the router) has a problem with pages not belonging to Gatsby. See the video attached which shows how I whitelist the blog path and the fact that Gatsby takes care of the blog path anyway. Any suggestion?

[KyleAMathews]

How are you linking to your blog?

[AurelioDeRosa]

UPDATE I uploaded the wrong Gif, sorry about that.

I show that in the GIF, but reporting here for your convenience:

const Link = ({ children, to, ...others }) => {
   const isBlogLink = /^\/blog(\/)?/.test(to);
   if (isBlogLink) {
      return (
         <a href={to} {...others}>
            {children}
         </a>
      );
   }

   const isInternalLink = /^\/(?!\/)/.test(to);
   if (isInternalLink) {
      return (
         <GatsbyLink to={to} {...others}>
            {children}
         </GatsbyLink>
      );
   }

   return (
      <a href={to} target="_blank" rel="noopener noreferrer" {...others}>
         {children}
      </a>
   );
};