8 Basic and Advanced React Router Tips | by Martin Novak | Jun, 2021 – DzTechno

That is all for React Router itself, but when you deploy your new application to production, you may soon find out that simply calling any subpage of your application may not work.

Routing will always work when you start from your root because Router doesn’t call your server to navigate but instead uses browser history features. So with most providers, if you call any URL of your site, it will fail.

The usual solution is to make sure that all server requests are always passed to the index. The solution to this always depends on the specific service that you are using.

React Router with Netlify

For example, if you are deploying your React app as serverless on Netlify, you need to add a _redirects file to the root of your app:

Now everything should work the way you expect and your routes will be fully supported.

React Router with Amazon Web Services S3

The same situation happens if you want to use Amazon Web Services with S3 for serverless delivery. I am using a solution from Stack Overflow.

You can put index.html in the Error document box. Go to your bucket (the one that actually has the code — not the one you use to redirect) -> Properties -> Static website hosting.

React Router for Amazon Web Services CloudFront

If you are using Amazon Web Services CloudFront, follow this advice from Stack Overflow.

Create a custom error page (AWS Docs) in CloudFront distribution that routes 404 errors to index.html and returns a 200 response code. This way, your application will handle the routing.

Leave a Reply

Your email address will not be published. Required fields are marked *