React项目如何正确加载public文件夹内静态HTML作为iframe源

1. 修正静态资源引用路径 #

你当前使用的../../Public/Buckconverter/story.html相对路径不符合Create React App（CRA）的资源引用规则，是导致问题的核心原因：

• CRA构建时会将public目录下的所有资源原样输出到打包产物根目录，不需要用相对路径回溯查找上级目录。
• 注意目录大小写敏感性，public目录默认是小写，不要写为大写的Public。
  如果你的文件存放路径为public/Buckconverter/story.html，直接将iframe的src属性写为/Buckconverter/story.html即可。
  如果项目部署在域名的子路径下，需要用环境变量拼接路径，写法如下：

<div className="iframe-container">
  <iframe
    width="560"
    height="315"
    src={`${process.env.PUBLIC_URL}/Buckconverter/story.html`}
    frameBorder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    loading="lazy"
    allowFullScreen
  />
</div>

2. 调整路由规则避免拦截静态资源 #

如果你使用了React Router等客户端路由工具，且配置了/*通配路由返回React应用根页面，需要保证静态资源路径不会被路由规则拦截：

• 本地开发环境下CRA的devServer默认优先匹配public目录下存在的静态文件，只要路径正确不会被路由拦截。
• 生产环境部署时，需要配置Nginx、Apache等Web服务器，优先匹配文件系统中存在的静态文件，匹配不到的路径再返回React的index.html走客户端路由逻辑。

3. 静态资源存放位置规范 #

不要将需要直接引用的原生HTML、配套媒体资源放在src目录下：src目录下的所有文件都会被CRA的构建系统进行转译、打包、哈希重命名等处理，无法保留原始的目录结构和文件内容，这类第三方静态资源必须全部存放在public目录下。

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