Handle 404 Error React Router On Refresh Windows Server

Resolve the blank screen or 404 error on page refresh in a React-based SPA on Windows Server. Enable the URL Rewrite module and configure your web.config for seamless React Router functionality.

Ever faced the issue of a blank screen or 404 error when refreshing a page in an app powered with React Router. This occurs when the URL path doesn't match any defined routes in the app's routing configuration 

Note. This Solution is for Windows server Hosting as I have been Struggling out with this issue and found a fix 

Reason

This is occurring because your site is a React based SPA (Single Page Application). When you visit the site via the root / it is automatically loading the index.html which is your application. and then when you visit other pages you never actually leave the index.html page

1. In your server configuration, enable the URL Rewrite module. This module allows you to rewrite or modify the URLs.

   • Go to Control Panel -> Programs -> Programs and Features.
   • Click on "Turn Windows features on or off" on the left sidebar.
   • Scroll down and locate "Internet Information Services," expand it, and then select "World Wide Web Services" -> "Common HTTP Features" -> "URL Rewrite."
   • Click "OK" and let the feature be installed.

Once the URL Rewrite module is enabled, open your project's web.config file (located in the root directory of your application).

<system.webserver>
<rewrite>
  <rules>
    <rule name="React Router" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  </rules>
</rewrite>
</system.webserver>

Note. Make sure that your React application is properly built and deployed on the Windows server before implementing the above solution.