Hey there! I've run into this exact React Router routing headache on Hostinger before, so let me walk you through updating your .htaccess file to fix those annoying 404s when accessing routes directly.

The Root of the Problem #

React Router uses client-side routing—meaning when you visit a path like /about directly, Hostinger's server tries to look for a physical /about file or folder (which doesn't exist) instead of letting your React app's index.html handle the route. We need to tell the server to send every request that isn't a real file/folder to index.html.

Updated .htaccess File #

Here's how to modify your existing SSL-focused .htaccess to include the React Router rules—order matters here, so keep the SSL redirects first:

RewriteEngine On

# Existing SSL & www redirect rules (keep these intact!)
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://www.matthewendicott.space/$1 [L,R=301]
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ https://www.matthewendicott.space/$1 [L,R=301]

# New rules for React Router client-side routing
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L]

Breakdown of the New Rules #

• RewriteCond %{REQUEST_FILENAME} !-f: Checks if the requested path isn't a real file (like .css, .js, or images). This ensures your static assets still load normally without being redirected to index.html.
• RewriteCond %{REQUEST_FILENAME} !-d: Checks if the requested path isn't a real directory. This keeps actual folders (if you have any) accessible.
• RewriteRule ^(.*)$ /index.html [L]: Sends all other requests to index.html, where React Router will take over and render the correct component for the requested route.

Quick Tips #

• Make sure this .htaccess file lives in your Hostinger public_html directory (the root of your website).
• After updating the file, clear your browser cache and test direct access to your routes—they should load without 404s now!

内容的提问来源于stack exchange，提问作者PCDSandwichMan