Step 13

Before we conclude this chapter, let us note some of the issues with using react-router and similar libraries. First, you should keep in mind that react-router is using the Web History API to create a perceived effect of routing. This "hack" does not always play well, in particular when you deploy your application. Some of these issues are noted on create-react-app documents: Serving Apps with Client-Side Routing.

The good news is that there are often workarounds. When deploying to Netlify, for instance, you can configure redirects and rewrite rules for your URLs. You'll need to add a file inside your app's public folder and name it _redirects. Then, inside this file, include the following rewrite rule:

/*    /index.html   200

When the React app is built, this _redirects file will be copied to the build folder.

Save the changes and push them to your GitHub repository.