One-Page App Routing on Netlify

While playing around with react router on a react app I'm building and deploying to Netlify, I noticed that I would get a 404 page not found error if I fully-refreshed the page, or entered from a location other than the index.

Looking deep into the Netlify docs I found out that you have to add a little file to your /public directory named '_redirects' with the following content:

All it does is rewrite all requests to any file that doesn't already exist to the index page, where react router can handle it.

Note that navigating to a file that exists from the app will not work without a forced refresh. For example if you were at '/', and you typed '/file.png', you would be passing '/file.png' to the router, of which a route (probably) won't exist.

Pretty simple!

No comments:

Post a Comment

Featured

Debounce API Requests in a JS Class

I have a react application that needs to access an API endpoint on the client side - which is hit when a user clicks on a button, as well as...

Popular