ReactJS 404 Error on Page Reload in production

[mm0hammadi]

when make a production build of your ReactJS application. when refresh page. the webserver doesn’t find any file with that name. In that case, a 404 error message is returned to the user. How can I fix this problem?

Error text:

404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

How can I fix it?

[JonnyBurger]

This is not a React problem but if your single page app is not configured correctly. See https://oliverjam.es/articles/avoid-spa-404 for an explanation of the problem.

[mm0hammadi]

I configured the web server settings in production. But I probably thought that the problem is with the routes of the project. thanks

[mm0hammadi]

Finally, I could find the solution, here is the link which can help you to solve this issue. you just need to copy th code in web.config file in server. @JonnyBurger It was fixed. https://dev.to/sumitkharche/how-to-deploy-react-application-on-iis-server-1ied

[Onkar-Kulkarni-6143]

@mm0hammadi : The link given is doesn't exist anymore. Could you please share the web.config file which helped you to resolve issue

[Max7oo]

@mm0hammadi : The link given is doesn't exist anymore. Could you please share the web.config file which helped you to resolve issue

The link works for me, but it does not fix my problem. Here's the code anyway:

<?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>

[Dhaya-Sanjai]

In you were using vite In your vite.config.ts file (just add '/' in base )

base:"" to this base:"/"

[mm0hammadi]

the web server settings in production. But I probably thought that the problem is with the routes of the projec

thanks