Why does my reactjs project on hostinger give a 404 error when opening a new tab or refreshing the page?

Question

I have deployed reactjs project on hostinger where i open any new tab or refresh the page it give error 404

i have used latest version of react router dom

Index.js
<Browserrouter>
<App/>
<Browserrouter/>


App.js

<Routes>
<Route path="/" element={<Home/>}/>
        <Route path="/about-us" element={<Aboutus/>}/>
        <Route path="/contact-us" element={<Contactus/>}/>
        <Route path="/career" element={<Career/>}/>
        <Route path="/work" element={<Work/>}/> 
        <Route path="/services" element={<ServicesMain/>}/>

<Routes/>

Answer 1

The issue is not with the React but your hosting config. You need to add rewrite rules by adding .htaccess file inside your 'public' folder with the following code.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>