Create React App部署后仅首页正常，其他页面报错求助

Hey there, let's get that routing issue sorted out for your React app on Hostinger!

First, let's break down the problem: Your React app is a single-page application (SPA), which means all page routing is handled client-side by React Router. When you try to access a page like https://goinprod.com/your-page directly, the Hostinger server looks for a physical file or directory with that name—and since it doesn't exist, you get an error.

Step 1: Clean Up & Update Your .htaccess File #

Your current .htaccess has duplicate HTTPS redirect rules, so we'll simplify that and add the critical SPA routing fix. Replace your existing .htaccess content with this updated version:

# DO NOT REMOVE THIS LINE AND THE LINES BELLOW SSL_REDIRECT:goinprod.com
RewriteEngine On

# Redirect HTTP to HTTPS (cleaned up duplicate rules)
RewriteCond %{HTTPS} off
RewriteCond %{HTTP_HOST} (www\.)?goinprod.com
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# DO NOT REMOVE THIS LINE AND THE LINES BELLOW SSL_REDIRECT:goinprod.com

# DO NOT REMOVE THIS LINE AND THE LINES BELLOW UPGRADE_INSECURE_REQUESTS:goinprod.com
Header always set Content-Security-Policy: upgrade-insecure-requests
# DO NOT REMOVE THIS LINE AND THE LINES BELLOW UPGRADE_INSECURE_REQUESTS:goinprod.com

# Handle React SPA Routing: Send all non-file/directory requests to index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

What This Does: #

• Keeps your HTTPS redirect intact (removed the redundant duplicate rules)
• Preserves the upgrade-insecure-requests header as required
• The new rewrite rules check if the requested path is not a physical file (!-f) and not a directory (!-d). If both are true, it sends the request to index.html, where React Router can take over and handle the client-side routing correctly.

Quick Additional Checks: #

• Ensure your React Router setup uses BrowserRouter (not HashRouter)—this works perfectly with your proper domain and HTTPS setup
• Your package.json "homepage": "https://goinprod.com/" is already set correctly, which ensures asset paths are generated properly during the yarn build step

Once you've updated the .htaccess file, upload it back to your public_html directory via FileZilla, then test accessing your other pages directly—they should load without errors now!

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