Use Gatsby Link w/ Netlify redirects to external links

Support
, , ,
#1

I have a rule in _redirect that directs an internal page (/page) to an external link (https://external.link)

I have a Gatsby Link that directs to page to /page: <Link to="/page">link to page</Link> and expect the site to redirect to the external link instead. However, the Gatsby Link still renders 404 (if the/page component doesn’t exist) or the page component (if it exists).

Anyone familiar with Gatsby Link and Netlify redirect: Is there no way of using both together? Do I have to use an anchor element with external links even though the link I’m routing from is an internal Gatsby link?

Our site project is called vngle (vngle.com)

#2

Hi, @VngleStories, it looks like you got it working when I test:

If this isn’t correct or if there are other questions, please let us know. It would be helpful to know the exact URL which isn’t redirecting is the issue isn’t resolved.

You can private message (PM) that to one of our support staff and I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

#3

Hey @VngleStories :wave:t2:

The best way I can put this into words is that Gatsby’s <Link> utility should be used when referencing pages built by Gatsby. There are a lot of implications under the hood that happen when you use <Link> and they don’t apply to using a _redirect link. Even though that redirect is a hook on a particular path from that domain, it’s not actually internal to the site. Gatsby doesn’t know it exists. Gatsby considers it external because it didn’t build a page for that path, even though that path does live on the same domain.

So tl;dr: yes, you do have to use a proper anchor tag: <a href="/page">Link to Page</a> but that’s normal behavior for Gatsby for external links.

For links to pages on other domains or pages on the same domain not handled by the current Gatsby site, use the normal <a> element.

Just consider your redirect as a “page on the same domain not handled by the current Gatsby site”

Hope that helps!

–
Jon

#4

Thank you @jonsully!

#5

Hi, ya it’s currently working because I’m using a regular anchor element that links to the external page URL. After some consideration I will probably just stick with what I have now. Thanks for answering though!