If you run a modern website built with React, Vue, Angular, or any other Single Page Application (SPA) framework, you may have faced a common problem. Everything works perfectly while navigating inside the site, but the moment you refresh a page or open a deep link directly, you get a 404 Not Found error.
This issue happens because the web server does not understand client-side routing. The .htaccess rewrite rule you shared is the most common and reliable solution to fix this.
In this guide, you will learn what this rewrite rule does, why it is needed, and how it improves user experience and SEO.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Why This Rule Is Needed
Traditional websites work differently from modern JavaScript apps.
Traditional Website Behavior
In a normal website:
-
/about → loads about.html
-
/contact → loads contact.php
-
Each URL corresponds to a real file on the server.
SPA Website Behavior
In a Single Page Application:
-
There is usually only one file:
index.html -
All pages are handled by JavaScript routing inside the browser.
Examples of SPA URLs:
-
/about
-
/pricing
-
/blog/post-1
These pages exist only inside the frontend app, not on the server.
So when someone refreshes the page or visits a link directly, the server tries to find a real file called /about or /pricing and fails, causing a 404 error.
This rewrite rule solves that problem.
