Internal link redirects not working (Gatsby)

I have a Gatsby site using WordPress as the CMS. When you type a URL that’s supposed to redirect into the browser, it redirects as expected. But if it’s a link on a page, because there’s no page refresh it doesn’t redirect. For example, if we visit https://rosenjustice.com/service-areas/practice-areas/ it redirects to Cases We Handle - Rosen Justice as expected. But if we go to https://rosenjustice.com/service-areas/practice-areas/car-accidents/bucks-county/car-accidents-attorney-in-bedminster/ and click on the Practice Areas link in the breadcrumbs, it doesn’t redirect.

It isn’t part of a Gatsby Link component, it’s a regular a tag being pulled in through GraphQL. This is what I’ve got in my _redirects file, which is in my static folder:
/service-areas/practice-areas/ /practice-areas/ 301!

Any guidance would be much appreciated.

Actually I did get this working myself. I’m still using gatsby-plugin-netlify, which I forgot to mention before, to handle the server redirects. I’ve now added the following to gatsby-node.js:

I added createRedirect (createPage was already there) to actions like so: const { createPage, createRedirect } = actions

Then for the redirect I added createRedirect({ fromPath: ‘/service-areas/practice-areas/’, toPath: ‘/practice-areas/’, isPermanent: true, force: true, redirectInBrowser: true }). The parts that are important there are force: true which forces the redirect even though there’s some content on /service-areas/practice-areas/ and redirectInBrowser: true which is what makes the client side redirect work.

I then removed the redirect from the _redirects file inside my static folder.

1 Like

Hey there, @ashleynexvel :wave:

Thanks so much for coming back and sharing your solution! Knowledge sharing is a great practice in the forums, and this will be very helpful to future members :netliconfetti:

1 Like