React JS路由异常：开发环境正常本地生产构建后无法运行

嘿，我可太懂这个坑了！我当初第一次部署React项目时也踩过一模一样的雷——开发环境下路由跳得飞起，构建成生产包后要么刷新就404，要么直接访问子路由就报错。这其实是BrowserRouter的特性导致的，它依赖HTML5的History API，而本地静态文件或者未配置的服务器没法处理这种路由请求。

先给你提个小细节：你代码里的<Route exact path='/' exact component={Login} />重复写了exact属性，虽然不影响功能，但可以删掉一个让代码更整洁。

下面分两种常见场景给你解决方案：

场景1：本地直接打开构建后的静态文件 #

如果你是直接双击dist/index.html来测试生产包，那BrowserRouter肯定没法正常工作——因为file://协议不支持History API的pushState方法。这时候换用HashRouter就能完美解决：

修改你的路由导入和代码：

import React, { Component } from 'react'
import { Switch, HashRouter as Router, Route, Link } from 'react-router-dom'
import Login from '../login'
import Home from '../Home'

class MyRouter extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/' component={Login} />
          <Route path='/Home' exact component={Home} />
        </Switch>
      </Router>
    )
  }
}

换成HashRouter后，路由会变成http://xxx/#/和http://xxx/#/Home的形式，完全不依赖服务器，本地打开静态文件也能正常跳转。

场景2：部署到服务器（Nginx/Apache/Express） #

如果是部署到服务器后出现问题，那核心是要让服务器把所有路由请求都转发到index.html——因为单页应用的路由逻辑是前端处理的，服务器根本没有对应/Home的物理文件。

Nginx配置示例 #

在你的Nginx站点配置里添加这段规则：

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

它会先尝试查找请求的文件/目录，找不到就返回index.html，交给前端路由处理。

Apache配置示例 #

在项目根目录创建.htaccess文件，写入：

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

Node Express配置示例 #

在你的Express服务器代码里添加：

const path = require('path');
// 先确保静态资源服务已配置
app.use(express.static(path.join(__dirname, 'build')));
// 所有非静态资源请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

额外提醒 #

如果是部署到服务器的子目录（比如https://your-domain.com/my-app/），记得在package.json里设置"homepage": "/my-app/"，或者在webpack配置里指定output.publicPath: '/my-app/'，同时路由的路径也要对应调整。

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