react-router-dom本地服务器正常，部署至线上服务器后路由失效求助

Hey there! This is one of the most common gotchas with React Router when moving from your local dev server to a production environment—let’s figure out what’s going on and how to fix it.

Why This Happens #

When you’re running locally with npm start, the Create React App dev server is set up to automatically redirect all requests to index.html (this is called a "SPA fallback"). But most production web servers don’t do this by default: if you try to visit a route like /about directly, the server looks for a file named about.html in your build folder, which doesn’t exist—hence the "URL doesn’t exist" error.

Solutions to Fix the Routing Issue #

1. Configure Your Production Server to Use SPA Fallback #

You need to tell your server to serve index.html for any request that doesn’t match an existing file (like CSS, JS, images, etc.). Here’s how to do this for common servers:

Nginx

Edit your Nginx configuration file (usually located at /etc/nginx/sites-available/your-site or similar) and add the try_files directive inside your location / block:

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/build/folder;
  index index.html;

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

After updating the config, restart Nginx with sudo systemctl restart nginx.

Apache

Create a .htaccess file in your build folder (if it doesn’t already exist) with the following content:

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

Make sure Apache’s mod_rewrite module is enabled (you can check with sudo a2enmod rewrite then restart Apache with sudo systemctl restart apache2).

Netlify/Vercel (Hosting Platforms)

These platforms automatically support SPA fallbacks if you add a simple config file:

• Netlify: Create a _redirects file in your public folder with this line:

  /* /index.html 200
  

• Vercel: Create a vercel.json file in your project root with:

  {
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
  }
  

  These files will be included in your build when you deploy.

2. Switch to HashRouter (If You Can’t Modify Server Config) #

If you don’t have access to edit your server’s configuration, you can switch from BrowserRouter to HashRouter in your React app. This adds a # to your URLs (like your-domain.com/#/about), and the server only cares about the part before the #—so it will always serve index.html.

To do this:

1. Import HashRouter instead of BrowserRouter from react-router-dom:

   import { HashRouter as Router, Routes, Route } from 'react-router-dom';
   

2. Wrap your app with Router as you did before.

Note: This will change your URL structure, so keep that in mind if SEO or clean URLs are important to you.

3. Double-Check Your Build and Deployment #

Before diving into server configs, make sure:

• You ran npm run build successfully (no errors in the terminal)
• You uploaded the entire build folder to your server (don’t miss any files or subfolders)
• Your server is pointing to the correct build folder as the root directory

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