This should work well for your App when the user tries to access a Client side route and refresh the page or when trying to access the route later. To add React Router in your application, run this in the terminal from the root directory of the application: npm i -D react-router-dom.
#Create a 404 route using react router code
Then create a web.config file for your App or create a new one with code as shown below:
#Create a 404 route using react router install
To solve this, send all your requests back to IIS with URL rewrite to the index.html static file and let the React App handle the routing.įirst install the URL Rewrite module on the IIS Server. First, we import the Routes and Route components from react-router-dom. Next, define the individual route using the Route component from React Router. Begin by removing the entire component’s code as well as the import statements. Since your React App is a Single Page Application (SPA), the Server is unaware of any static files like courses and will give 404 error. Step 3: Import the components in App.js and configure the routes. Unfortunately, if you refresh the page or copy/paste a url that includes a route, such as /about, you will get a 404 error. This problem is not known while debugging the App in localhost until you host the App on an IIS Server. The Dreaded 404 If you split your application into multiple front-end routes, using libraries such as react-router or reach/router, your application will appear to work perfectly at first. When trying to handle Client side routing for your React App hosted on IIS say using react-router-dom, you might need to handle situations where users access specific sections of your App like Users might even save these URLs in their favorites and try to access them later.