Hey there! I’ve worked with this exact setup (Create React App + React Router v4) plenty of times, so let’s break down how to get your .htaccess working right, plus cover some best practices you might want to consider.

Here’s a tailored .htaccess file that will forward all requests (except those targeting your /assets directory) to index.html:

# Enable the rewrite engine
RewriteEngine On

# Preserve Authorization headers (critical for auth flows if you use them)
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

# Skip rewrite if the request is for an existing file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# Exclude the /assets directory from being rewritten
RewriteCond %{REQUEST_URI} !^/assets/

# Forward all remaining requests to index.html
RewriteRule ^ index.html [L]

Let’s break down what each part does: #

• RewriteEngine On: Turns on Apache’s URL rewriting functionality—this is mandatory for the rules below to work.
• The Authorization header rule: Ensures any auth tokens (like JWTs) aren’t lost during the rewrite, which is important if your app handles user authentication.
• !-f and !-d: These conditions tell Apache to skip rewriting if the request is for a real file (like an image in /assets) or a real directory. This keeps your static assets accessible directly.
• !^/assets/: Explicitly excludes any request starting with /assets/ from the rewrite rule, so all your images, icons, and other static resources load as expected.
• RewriteRule ^ index.html [L]: Forwards every other request to index.html, where React Router will handle the virtual URL routing. The [L] flag means "last rule"—Apache stops processing further rules once this one runs.

While the .htaccess solution works great for Apache servers, there are a few other approaches that might be better depending on your deployment setup:

• Leverage CRA’s Official Deployment Tools
  When you run npm run build, Create React App generates an optimized production bundle. Most modern hosting platforms (like Netlify, Vercel, or Firebase Hosting) automatically handle SPA routing out of the box. You don’t need to write any .htaccess files—just upload your build folder, and the platform will configure rewrites for you. Some even let you add a _redirects file (simpler than .htaccess) if you need custom rules.

• Switch to Nginx (If Possible)
  If you’re using Nginx instead of Apache, the configuration is even cleaner. Here’s what you’d add to your server block:

  location / {
    try_files $uri $uri/ /index.html;
  }
  
  location /assets/ {
    try_files $uri $uri/ =404;
  }
  

  This does the same thing as the .htaccess rule: serves real files/directories first, forwards everything else to index.html, and ensures /assets resources are served directly.

• Use HashRouter as a Fallback
  If you can’t modify server configurations (e.g., on a shared host with restricted access), switch from BrowserRouter to HashRouter in React Router. Hash-based URLs (like yoursite.com/#/about) don’t require server rewrites because everything after the # is handled client-side. The tradeoff is slightly less clean URLs, but it’s a reliable workaround.

• Double-Check Asset Paths
  Make sure you’re referencing assets correctly in your React code. Use absolute paths like /assets/logo.png or let CRA handle imports (e.g., import logo from '../assets/logo.png'). When you build the app, CRA will place these assets in the build/assets directory, so your server’s file structure needs to match this.

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