404 Error - When Browsing Page Manually in React App

If you are deploying a react app to IIS, you may run into a 404 error when you try to browse the URL manually or if you try to refresh the page. 

Here are the steps to solve this issue:

First, create a web.config file using Notepad++

Then add the following syntax to the web.config:

<?xml version="1.0"?> <configuration>
      <system.webServer> <rewrite> <rules> <rule
      name="React Routes" stopProcessing="true"> <match url=".*" />
      <conditions logicalGrouping="MatchAll"> <add
      input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add
      input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions> <action type="Rewrite" url="/" /> </rule>
      </rules> </rewrite> </system.webServer>
      </configuration>

Save the file, then upload it to the root directory of your react app.