Fixing React Routing Issue on Hostinger: A Simple .htaccess Solution

If you’ve ever deployed a React app on Hostinger, you might have noticed an annoying issue: the homepage works perfectly, but navigating to other pages results in a 404 error. This happens because React is a Single Page Application (SPA) that relies on client-side routing, while Hostinger’s server expects actual files for each route.

In this blog post, I’ll show you how to fix this issue by adding a simple .htaccess rule. Let’s get started! 🚀

The Problem: Why Does This Happen?

• The homepage (/) loads fine
• Clicking on routes like /about or /contact gives a 404

This is because React uses client-side routing, but Apache on Hostinger looks for actual files or folders for each route. Since they don’t exist, it throws a 404.

The Solution: Modify Your .htaccess File

We need to tell Apache to serve index.html for all routes. Here’s how:

🔧 Steps to Fix Routing on Hostinger

1. Log into Hostinger and open the File Manager
2. Navigate to public_html
3. Find or create a .htaccess file
4. Add 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>

Save the file and refresh your app — all routes should now work as expected! 🎉

🔍 How Does This Work?

• RewriteCond %{REQUEST_FILENAME} !-f → Not a file
• RewriteCond %{REQUEST_FILENAME} !-d → Not a directory
• RewriteRule . /index.html [L] → Redirect to index.html

💡 Alternative Solutions

✅ Netlify

Create a netlify.toml file in your project root:

[[redirects]]
                                            from = "/*"
                                            to = "/index.html"
                                            status = 200

✅ Vercel or Firebase

These platforms handle routing automatically — no extra steps needed. 🚀

✅ Nginx

location / {
                                            index index.html;
                                            try_files $uri /index.html;
                                        }

✅ GitHub Pages

Set the homepage in package.json:

"homepage": "./"

Also create a 404.html that redirects back to index.html.

Conclusion

If you’re hosting a React app on Hostinger and facing routing issues, this .htaccess fix is the easiest way to make everything work smoothly. It takes just a few lines of code to ensure your site behaves as expected.

📌 Did this solution work for you? Let me know in the comments!

👨‍💻 Follow me on LinkedIn