React routes on Netlify in 2 steps

React routes on Netlify in 2 steps

This week I just finished a very cool project (if you feel ๐Ÿ‘€). It's a mobile web app to check your daily music stats, all artists and tracks it's getting from Spotify API.

I had finished and it was doing well on my localhost. I decided to go with a manual deployment on Netlify (drag and drop), so I built the project and I deployed the application. At the moment was fine then I decided to try a non-authorized route to test <Redirect /> options, and I ran out with this error. image I didn't know what was going. I was reviewing again the code and it didn't seem to have any issue.

Then I found this support guide, and I understand what was going on. However I was doing a manual deploying, building, and uploading build directory to Netlify, again search and I found this solution. It's basically we have to allow redirecting any unknown route to index.html file.

Redirects file

Go to public directory and create _resources file

Add redirect routes

On _resources file add

/* /index.html 200

Build again the project

npm run build

Deploy again

Drag and drop build directory to Netlify deployed section

Conclusion

This approach scopes just for manually deployment, if you're deploying from GitHub reposit follow this tutorial


I'd be grateful if you could leave a comment if you found this post helpful or liked it. Also, let me know if you have another approach to deal with the same issue

Please follow @btandayamo on Twitter