Gatsby: Redirects links don't work properly on prod

Created on 25 Sep 2017  路  8Comments  路  Source: gatsbyjs/gatsby

After adding support for redirects via #2185 and #2191, the new React site (reactjs.netlify.com) started using one for the "Blog" page. Landing on /blog should redirect the user to the most recent post (as defined here).

However, clicking on the "Blog" nav link often does _nothing_. A look in the console shows the following message:

A page wasn't found for "/blog/"

Loading the /blog URL directly works though. This would indicate that Netlify is doing what it should, _however_ both clicks and direct URL loading works for Gatsby in development mode so maybe there's something I'm overlooking on the Netlify side (cc @bdougie).

This might also indicate that something in either gatsby or react-router is mis-handling the nav link click. (Again this works in development but not in production.)

Haven't looked into this yet. Will probably have to rollback the redirect change on the site for the time being since we hope to launch tomorrow.

Most helpful comment

@bvaughn yeah we need to implement the same thing we did in development in production. I have another idea to try here so I'll put together a PR in a sec.

All 8 comments

I ran into something similar with regards to Gatsby Link and /path vs /path/, so it may not entirely be related to the redirects. Trailing slashes throw the console error, while non-trailing work fine. I'm sure someone more familiar with the inner workings of the link package can jump in on specifics.

That's interesting! Thanks for the data point @markmichon.

It's important that we support trailing slash for backwards URL compatibility with the previous site, but I'll try _also_ adding a non-trailing-slash redirect and using it in the nav-link. Will report back with findings momentarily.

@bvaughn yeah we need to implement the same thing we did in development in production. I have another idea to try here so I'll put together a PR in a sec.

I can confirm that removing the trailing slash from the link seems to fix the behavior I described on Production as being broken, which is great for now (for a short-term fix) but not great for long-term 馃榿

Rats. Looks like removing the trailing slash worked on the Netlify preview (eg deploy-preview-10815--reactjs.netlify.com) but not on the master build (reactjs.netlify.com). 馃槮

2227 is released as 1.9.44. Give it a try!

On the trailing slash vs. no-trailing slash. Gatsby does treat them as different right now for matching paths as it does a simple string comparison. Netlify normalizes them when loading pages which is why it works with either a trailing slash or no trailing slash. I can see us adding support for this as well though it doesn't like that's actually the problem here? Perhaps I'm not understanding what the slash issue is you're referring to.

You rock! 鉂わ笍

Looks fixed (tested via facebook/react/pull/10820) so I'll close this issue 馃槃

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikestopcontinues picture mikestopcontinues  路  3Comments

totsteps picture totsteps  路  3Comments

Oppenheimer1 picture Oppenheimer1  路  3Comments

magicly picture magicly  路  3Comments

benstr picture benstr  路  3Comments