Fixing 404 Errors in Client-Side Routing After Deployment

Are you getting a 404 Not Found error when navigating between pages on your deployed website, even though all your routes work perfectly locally? If you’ve set up routing correctly in your project (using React Router, Vue Router, or Angular Router), this can be confusing. Let’s break down why this happens and how to fix it.

First, this is a common problem when we are new to deploying website, especially when we working on project that use react router, vue router, angular router. All of that is client routing.

What is client routing ?

“In traditional server-side routing, the server responds with a new HTML page for each URL. But in SPAs (Single-Page Applications), client-side routing (via React/Vue/Angular routers) intercepts navigation requests, dynamically updates content, and avoids full page reloads. This makes the app feel faster but introduces a deployment quirk: the server doesn’t recognize these client-side routes by default.” (source: https://vuejs.org/)

okay, now we know about what we have done. We are using client side routing to improve user experience when using our website experience with reducing the amount of data that reloaded when user interact with our website.

What is the problem ?

“During development, tools like Vite or webpack-dev-server handle client-side routing seamlessly. But when you deploy to a static host (like Apache or shared hosting), the server looks for actual files/directories matching the URL. Since SPAs use virtual routes (e.g., /portfolio), the server fails to find them and throws a 404 error.” (source: deepseek AI)

How to solve this ?

add .htaccess file to your public folder

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

after you add .htaccess file, just build your project then upload to your hosting file manager, and your website will be running like usually.

But, what the file does so we can get rid of the error ?

Get Rio Hanson Manalu’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This configuration tells the server to:

Redirect all requests to index.html if the URL doesn’t match a real file or directory.

1. Let your client-side router (React/Vue/Angular) handle the routing instead.

basically, it means that we are going to make a fallback solution when route is not found. Remember server is trying to find a file or directory matching the url (route). So we are going to rewrite the rules and directing the request to root file, because we use one file html as root, and in my case is index.html.

Detail explanation :

1. RewriteEngine On : Enables URL rewriting functionality.
2. RewriteBase / : Sets the base path for all rewrite rules (typically the root directory).
3. RewriteRule ^index.html$ — [L]:
   - If the requested URL is exactly index.html, do nothing (`-`).
   - The [L] flag means “last” — stop processing further rules if this one matches.
4. RewriteCond %{REQUEST_FILENAME} !-f:
   - Condition: The requested file does not exist as a physical file on the server.
5. RewriteCond %{REQUEST_FILENAME} !-d:
   - Condition: The requested path is not a real directory on the server.
6. RewriteRule . /index.html [L]:
   - If both conditions above are met (i.e., the request is not for an existing file or directory), redirect all requests to index.html.
   - Your JavaScript application will then handle client-side routing from there.

note: For React Router, ensure your <Router> has the correct basename (e.g., basename="/" for root deployment). Other frameworks like Vue Router or Angular have similar base-href settings. :

<Router basename="/">
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<Home />} />
        <Route path="/portfolio" element={<Portfolio />} />
      </Route>
      <Route path="*" element={<NotFound />} />
    </Routes>
  </Suspense>
</Router>

Now you understand why client-side routing causes 404 errors on deployment and how to solve them with server configuration. If you encountered other solutions (like Netlify’s _redirects or Vercel’s rewrites), share them in the comments!