admin管理员组文章数量:1321065
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/>
-
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
Reset to default 11The 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>
本文标签：
版权声明：本文标题：javascript - Why does my reactjs project on hostinger give a 404 error when opening a new tab or refreshing the page? - Stack Ov 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742024129a2415222.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论