如何在React组件中嵌入独立HTML/JS游戏？遇iframe 404问题

核心原因 #

React项目的资源加载规则和普通静态网页不同：开发/打包后的资源路径是相对于服务器根目录（或public目录），而非你源码文件的相对位置。你用的../../../Standlone Games/Tetris/index.html是源码里的相对路径，浏览器解析时会基于当前组件的编译后路径，自然找不到目标文件。

快速解决方案（推荐） #

1. 把游戏文件移到React的public目录下
   React默认将public目录作为静态资源根目录，里面的文件可直接通过根路径访问。

   • 操作：把整个Tetris文件夹（含内部HTML/JS/CSS文件）移到public/Standalone Games/目录下（注意拼写修正：原Standlone改为Standalone）。
   • 组件中直接用根路径引用：

     <iframe 
       src="/Standalone Games/Tetris/index.html" 
       width="600" 
       height="800" 
       title="Tetris Game"
       frameBorder="0"
     />
     

   此方法适配开发环境与打包部署，能确保游戏正常加载。

2. 验证路径有效性
   开发时可直接在浏览器地址栏输入http://localhost:3000/Standalone Games/Tetris/index.html，若能打开游戏页面，说明路径无误，组件内的iframe即可正常渲染。

其他可选方案（自定义配置场景） #

若不想移动文件，需修改webpack配置处理外部静态资源：

• 若使用Create React App，需先执行npm run eject（不可逆），或借助craco/react-app-rewired扩展配置。
• 添加copy-webpack-plugin，将Standlone Games目录复制到打包后的build文件夹，即可通过相对路径访问。此方法步骤繁琐，非特殊需求不推荐。

额外提示 #

无需使用dangerouslySetInnerHTML嵌入iframe，直接使用<iframe>标签更简洁安全。

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