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

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

• javascript
• node.js
• reactjs
• react-hooks
• domain-driven-design

• Your index is a bit suspect. Watch the Pascal casing on BrowserRouter, and you're not closing that ponent properly. It should be </BrowserRouter>. Does this work locally? Have you tested it? – Andy Commented Jun 2, 2023 at 13:42
• 1 I have wrote this mannually...Its written in Pascal casing – Ashiq Avadia Commented Jun 2, 2023 at 13:49
• This is because opening a new tab or refreshing does a new request to the server. On the root path / then it's fine, but when you go onto any routes beyond that, those paths aren't actually set up on hostinger, which simply hosts your entire built app at a single root route. I believe the options are to either use a hash router, or to have a hosting environment where you control the server (i.e. can implement a server that has a catch all route that just always returns your app, regardless of the route being requested). If you Google "react router 404 refresh" or similar, you can see deeper – Jayce444 Commented Jun 2, 2023 at 13:54
• Should be able to fix this with a rewrite in .htaccess. You need to redirect / to /index.html – Kyle Lambert Commented Jun 2, 2023 at 14:03

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