Fixing up Netlify Page Display Problems with React Router Redirects
In which I add a _redirects file to my project’s public folder, and think about routing, page refreshes, redirects, and error handling.
After deploying my react app via Netlify, I found that a simple kludge/workaround that I had put into my app to prevent it from breaking on refresh had stopped working.
Today I spent some time fixing that and this is how that went.
To begin with, I should explain that my app, called chromatic notes, does not have a back end. It is for now an entirely front-end project, so I decided, in order to give a slightly more interactive UX, the data for the notes would just be randomly generated by the frontend. Because this also includes the notes’ IDs, I ran into a problem.
If a user was viewing an actual note, which would be displayed by the note page component, using react router and nested routes, the URL for that particular note page would be displayed in the address bar in the format /notebook-color/note-ID, for example:
https://chromatic-notes.netlify.app/dark-green/28
or
http://localhost:3000/dark-green/dark-green/28
Because of this, if a user refreshed the page while they were viewing a note, the app would break most of the time, except in the unlikely but occasional event of the newly generated array of notes containing the same number ID as the previous array.
When it broke, Netlify would then serve this error message:
I had solved this problem first in a way that worked locally on my computer before I deployed via Netlify, thus:
In the note page component, if the note data existed and its ID matched the ID in the url, the note page would assign the note data to be the particular note’s title, text, and date. Otherwise, if the note didn’t exist, I had an errorNote object, whose properties would be displayed in the note page component. This error note would deal with the possibility of a user refreshing the page while viewing a note, and consequently having a URL that pointed towards no corresponding route/note.
As you can see above from that screenshot, this worked locally, but as soon as I deployed the project on Netlify I started getting that error message that you can see further up on this page.
To fix this, in the note page component, I added an if else statement, where in the if case that the note existed, it would render the note page as usual. In the else case, where the note did not exist, instead of rendering the typical note component, a redirect would be rendered, thus:
else { return ( <Redirect to={`/${color}`}/> )}
In addition, a small piece of configuration needed to be done to make this work, since Netlify out of the box isn’t compatible with react-router. In the public folder of my project, I created a new file, titled _redirects, and in that file, I wrote this single line of code:
/* /index.html 200
This solution is mentioned here, but so is a lot of other stuff:
Netlify “page not found” when sharing React-Router-Dom based links
I found this more helpful, since it is clear and gets to the point quickly:
While clear, that article doesn’t entirely explained how this works, so I also wanted to include this explanation offered by user Eric Zumwalt in response to a comment on the above article asking about how does this work:
“This easy fix works on React projects by telling the browser to refer to ‘index.html’ for all manually entered URL’s.
By default, if I got to ‘www.yoursite.com/somepage’ the browser looks for a file (usually an index.html) in that sub route (‘/somepage’).
React is a Single Page Application, so there aren’t multiple pages (not an individual html file per page), React just rebuilds the view (sometimes using URLs with something like React Router).
So, this fix tells the browser to load the main index.html no matter what the manually entered URL is and then your React App can read the URL and build the correct view!”
There’s a bit more I could talk about here, but I’ll just leave some bread crumbs for myself to follow later, since I don’t want this article to drag on forever:
1) I’m still kind of curious about why my earlier approach to page-error handling works locally but not on netlify. I think I’ve come a little bit closer to understanding what was happening, and obviously have fixed the problem now, but I’m still curious about the mechanics behind why netlify was serving its own error message instead of the one that I had created. It seems like a best practice for netlify to do this, so I don’t have a problem with it, I’m just curious about what was going on under the hood.
2) For now, out of laziness and so as not to have to go in and fix more things, I have left my errorNote object inside the app, since without it, the app will still break if no note exists to match a URL ID (this will produce the error message cannot destructure undefined). That makes enough sense to me, but it also feels weird that I need an error message to handle object destructuring even though that error message is never actually going to get used. I guess that’s just a Moment of Zen pondering JavaScript.