React中window.open无法加载相对路径文件，如何实现加载？

问题原因 #

React项目的src目录下的文件会被webpack编译处理，不会直接暴露在服务器根路径中。当你使用./test.html这类相对路径时，浏览器会向服务器根目录请求该文件，但服务器根目录并没有这个文件，因此返回cannot GET /test.html。而绝对URL能生效是因为直接指向了文件在本地服务器的实际位置。

可行的解决方法 #

方法1：将HTML文件移到public目录 #

React的public目录是静态资源的根目录，这里的文件会被直接复制到打包后的根路径，无需经过webpack编译。

• 把src/test.html移动到public/test.html
• 修改test.tsx中的路径：

  const url = "./test.html";
  // 也可以直接写 "/test.html"，因为public对应服务器根目录
  

  调整后点击按钮即可正常加载test.html。

方法2：通过webpack导入HTML文件（适用于不想移动文件的场景） #

如果你的项目基于Create React App创建，默认未暴露webpack配置，可通过以下步骤处理：

1. 安装craco：npm install @craco/craco --save-dev
2. 在项目根目录创建craco.config.js，添加file-loader配置：

   module.exports = {
     webpack: {
       module: {
         rules: [
           {
             test: /\.html$/,
             use: [
               {
                 loader: 'file-loader',
                 options: {
                   name: '[name].[ext]',
                 },
               },
             ],
           },
         ],
       },
     },
   };
   

3. 修改package.json中的脚本，替换为craco命令：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

4. 在test.tsx中导入HTML文件并使用：

   import React from "react";
   import testHtmlUrl from "./test.html";
   
   export const Test = () => {
     const openWindow = () => {
       const features = 
       "menubar=no,location=no,resizable=no,scrollbars=no,status=no,addressbar=no,width=320,height=480";
       window.open(testHtmlUrl, "self", features);
     };
     return (
       <>
         <button onClick={openWindow}>Open Window</button>
       </>
     );
   };
   

   这样webpack会自动把test.html打包到输出目录，并生成正确的访问URL，window.open即可正常加载文件。

方法3：使用根相对路径（不推荐生产环境） #

如果本地服务器运行在http://127.0.0.1:5501，可以直接用/src/test.html作为路径，但这种写法依赖服务器目录结构，部署到生产环境时大概率需要调整，通用性较差。

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