Redirects to external websites don't work when a link is clicked - Gatsby

Netlify site name: goodhire.com

  1. Navigating directly to this link (https://www.goodhire.com/screening/employment-credit-report/) redirects the user to Credit Background Checks & Reports for Employment | Checkr. This is expected behavior.

  2. Navigating to this same link by clicking “Credit Checks” on this page (about halfway down the page), takes the user to the 404 page instead.

Is this an issue with how Netlify handles redirects?

No, it’s kind of the opposite.

Look at the Network tab of your developer tools.


Direct Access

When accessing the URL directly you see:

This is because a request was made for that URL, Netlify’s redirect engine responded and redirected.


Site Link

When you click the link in your page you see:

Your SPA has internal routing that makes a request to:
https://www.goodhire.com/page-data/screening/employment-credit-report/page-data.json
(which does not exist)

It also attempts to retrieve the external URL via ajax:
https://checkr.com/background-check/credit-checks
(which is blocked by CORS)

It then displays its own 404 page.

No actual GET request is made for the window to visit /screening/employment-credit-report/ so Netlify’s redirect engine isn’t even involved.


The solution will be to adjust your site, and I can’t advise precisely how you would do that.

Ultimately you want to ensure that you either:

  1. Have the page actually navigate to the URL when clicked so that Netlify’s redirect occurs.
    OR
  2. Duplicate the redirect/external link into whatever SPA routing you have so that clicking on it ends up on the external page via other means.

Thank you, @nathanmartin, I appreciate your help.

For those finding this through a search engine and want an answer:

I found that gatsby-source-wordpress has a dependency on gatsby-plugin-catch-links, which was converting a tags to Gatsby Link components.

Since a relative link was set up to redirect to an external site, gatsby-plugin-catch-links did not know to that it should leave that tag alone, converting it to a Link component.

The Link component was then trying to navigate to a different domain, throwing an error (since Link components can’t target urls outside the current site.

Thank you!

-Joe

@Joe_Bayer You’ve provided an explanation that is gatsby specific for how precisely the situation I outlined was occurring, but you’ve not provided how you fixed it for your situation.

What change did you make to your project to fix your problem?
That’s likely to be much more useful information for anyone visiting the thread in future!

Did you change plugins?
Did you change the link so it points directly to the external URL?
etc.

The change that we’re making to resolve this problem is to change the href of link in wordpress so that it points to the external URL. We are also keeping the redirect in place so that navigating directly to the old url will still redirect to the external url.

We prefer this solution because gatsby-plugin-catch-links is improving the application 99% of the time, except in this one edge case.