如何在Create React App构建的React应用中打开外部HTML文件

你的问题其实是Create React App的两个特性导致的：一是它的开发服务器会接管所有路由请求，指向React的入口文件；二是默认webpack配置不支持直接导入HTML文件。下面给你两个最实用的解决方案：

方案一：把HTML文件放到public目录（推荐） #

Create React App的public文件夹是专门存放静态资源的，里面的文件会被直接复制到构建输出目录，不会被webpack处理，也不会被React路由拦截。

步骤很简单：

1. 把你的project.html（包括它依赖的资源）放到public/projects/目录下（如果没有projects文件夹就新建一个）
2. 直接用根路径作为href值：

const Portfolio = (props) => {
  return (
    <a href="/projects/project.html" target="_blank">
      <button>Go to this project</button>
    </a>
  )
}

这样点击链接时，浏览器会直接请求这个静态HTML文件，完全绕过React的路由处理，就能正常打开目标页面了。

方案二：配置webpack支持HTML导入（适合不想动public目录的场景） #

因为Create React App默认隐藏了webpack配置，所以我们需要借助react-app-rewired来修改配置，步骤如下：

1. 安装必要依赖：

npm install --save-dev react-app-rewired html-loader

2. 在项目根目录创建config-overrides.js文件，添加html-loader的规则：

module.exports = function override(config, env) {
  // 新增处理HTML文件的loader规则
  config.module.rules.push({
    test: /\.html$/i,
    loader: 'html-loader',
  });
  return config;
};

3. 修改package.json里的scripts命令，替换成react-app-rewired：

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

4. 现在你就可以正常导入HTML文件并使用了：

import html from "../projects/project.html"

const Portfolio = (props) => {
  return (
    <a href={html} target="_blank">
      <button>Go to this project</button>
    </a>
  )
}

为什么你之前的方法不行？ #

• 第一种直接用相对路径：CRA的开发服务器会把所有路由请求都转发到index.html，所以你访问../projects/project.html时，服务器返回的是React的入口文件，然后React路由尝试匹配这个路径，自然打不开目标HTML。
• 第二种导入HTML但配置失败：因为CRA默认不允许直接修改webpack配置，你手动改的webpack.config.js其实不会被CRA使用（它用的是内部的配置），所以必须用react-app-rewired或者eject来修改。

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