React部署Nginx后外部HTTPS链接总是重定向至首页求助

Got it, let's break down why your React app is redirecting to the homepage when accessing subpaths like https://example.com/foo/baz, and how to fix it.

First, Let's Spot the Issues in Your Current Config #

Your existing Nginx config only handles HTTP-to-HTTPS redirection on port 80, but it's missing the critical HTTPS (port 443) server block that actually serves your React app. Also, in the port 80 block, the root and index directives never run because the return 301 is the first directive—Nginx stops processing after that.

The Correct Nginx Configuration for React SPAs #

React is a single-page app, which means all routing happens client-side. Nginx doesn't know about your React routes (like /foo/baz), so when it gets a request for a path that doesn't correspond to an actual file in your dist folder, it defaults to returning a 404 or redirecting. We need to tell Nginx to send all non-static-file requests to index.html, where React's router can take over.

Here's the full, working config:

# Handle HTTP -> HTTPS redirect
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com;

    # Redirect all HTTP traffic to HTTPS
    return 301 https://$server_name$request_uri;
}

# Serve the React app over HTTPS
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name example.com;

    # Replace these paths with your actual SSL certificate files
    ssl_certificate /path/to/your/certificate.crt;
    ssl_certificate_key /path/to/your/private.key;

    # Root directory where your React dist files live
    root /home/[path to dist folder]/web/app/dist;
    index index.html index.htm;

    # Critical rule for React routing: send all non-static requests to index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Optional: Add caching for static assets (JS, CSS, images, etc.)
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Why This Works #

• HTTP-to-HTTPS Redirect: The first server block ensures all traffic goes to HTTPS, which is what your production app uses.
• HTTPS Server Block: This is where we actually serve your React app. The try_files directive tells Nginx:
  1. First, look for a file matching the request URI (like foo/baz.js if that existed)
  2. If no file exists, look for a directory with that name
  3. If neither exists, send the request to index.html—this lets React's router parse the path and render the correct page.
• Static Asset Caching: The optional location block caches your static files for a year, which improves performance for repeat visitors.

Next Steps #

1. Replace the SSL certificate paths with your actual certificate files (you'll need these for HTTPS to work properly)
2. Update the root path to point to your real dist folder
3. Save the config and restart Nginx with sudo systemctl restart nginx
4. Test accessing https://example.com/foo/baz—it should now load the correct React page instead of redirecting to the homepage.

Content of the question comes from Stack Exchange, question author Ivan Sugiarto