如何在Create React App的Public文件夹中正确打开静态HTML文件？

一、排查核心原因 #

你遇到的跳转问题，大概率是以下两个原因之一：

1. 生成的HTML引入了React运行时脚本：如果usus生成的HTML里包含了React打包后的main.*.js等脚本，React的路由（比如BrowserRouter）会接管页面路由，当检测到当前路径不在React路由配置中时，就会跳转到首页（index.html对应的路由）。
2. 服务器重定向规则干扰：Create React App的生产环境服务器（比如默认的serve）默认开启单页应用模式，会把所有未匹配到静态文件的请求重定向到index.html；开发环境的dev server也有类似的history fallback规则，可能误把/article下的HTML请求重定向了。

二、针对性解决方案 #

方案1：确保生成的HTML是纯静态独立文件 #

如果这些/article下的HTML不需要依赖React应用的功能，最简单的解决方式是让它们完全独立：

• 打开生成的HTML文件（比如aaa-bbb-ccc-ddd.html），检查是否有类似以下的React脚本引用：

  <script src="/static/js/main.xxxxxx.js"></script>
  

• 删除所有React相关的脚本、样式引用，只保留HTML自身的内容、样式和独立脚本。这样页面加载后不会触发React的路由逻辑，也就不会跳转。

方案2：配置路由与服务器规则，共存React应用与静态HTML #

如果需要React应用和静态HTML共存，需要分别处理开发环境和生产环境：

开发环境调整

Create React App的dev server默认会优先返回/public下的静态文件，但如果你的React路由有通配符规则（比如<Route path="*" element={<NotFound />}），需要确保通配符路由放在最后，避免拦截/article路径。

如果还是出现跳转，可以通过react-app-rewired修改dev server的history fallback规则：

1. 安装依赖：

   npm install react-app-rewired customize-cra --save-dev
   

2. 在项目根目录创建config-overrides.js：

   const { override, devServer } = require('customize-cra');
   
   module.exports = override(
     devServer(config => {
       config.historyApiFallback = {
         disableDotRule: true,
         // 让/article下的请求直接返回对应文件，不重定向到index.html
         rewrites: [
           { from: /^\/article\/.*$/, to: context => context.parsedUrl.pathname },
           { from: /^\/.*$/, to: '/index.html' }
         ]
       };
       return config;
     })
   );
   

3. 修改package.json的启动命令：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

生产环境调整

如果用serve启动生产环境，默认的-s参数会开启单页应用重定向，需要修改启动方式或者用Nginx配置：

• 方式二：用Nginx部署，添加路径匹配规则：

  server {
    listen 80;
    server_name your-domain.com;
    root /path/to/your/build/folder;
    index index.html;
  
    # 处理/article下的静态HTML，直接返回对应文件
    location /article/ {
      try_files $uri $uri/ =404;
    }
  
    # 其他路径交给React单页应用处理
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

  这样Nginx会优先返回/article下的静态文件，其他路径则重定向到index.html，兼顾静态HTML和React路由。

方案3：检查HTML的base标签设置 #

如果生成的HTML里有<base href="/">，可能导致页面内的相对路径出错，触发服务器重定向。可以：

• 去掉<base>标签，或者修改为<base href="/article/">，确保页面资源路径正确。

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