React 应用程序可以链接到公共文件夹上的静态 html 吗？

Posted 2023-02-24

【中文标题】React 应用程序可以链接到公共文件夹上的静态 html 吗？

【英文标题】：Can a React app link to a static html on the public folder?

【发布时间】：2021-05-14 19:55:15

【问题描述】：

我正在使用 react-router 创建一个 react 应用程序来更改页面，但我有一个包含 Unity webgl 的静态 html。我无法将 webgl 嵌入到 react 应用程序中，或者不确定是否可行，但我确信 Unity webgl 可以在独立的 html 上工作，因为它在 Unity 的 build and run 期间运行所以我只想在网站的公共文件夹中转储 Unity 构建文件（UnityWebGl.html、Build 文件夹、TemplateData 文件夹）在 react 上使用 href 标签 链接到它，而不会被 react-router 拦截。

老实说，我在第一次尝试使用 a href 标记时就可以让它工作，但愚蠢到没有 git commit。这似乎也不稳定，所以我想知道在不使用后端服务器的情况下链接到 react 应用程序中的静态 html 的正确方法。

所以我在网站的公共文件夹中添加了Unity创建的UnityWebGl.html、Build和TemplateData文件夹。 【图片】：https://i.stack.imgur.com/DWiQF.png

这是链接到静态 html 的组件上的 href 标记： <a target="_blank" href="/UnityWebGl.html"><Button>View Demo</Button></a>

我没有在 react-router 上添加静态 html 的路由，但不确定是否必须添加，因为我没有使用链接转到静态 html 页面：

<Router>
  <div className="App">
    <Switch>
      <Route exact path="/unitywebglsamples">
        <Header />
        <Samples />
      </Route>
      <Route exact path="/myhomepage">
        <Header />
      </Route>
      <Route exact path="/">
        <Header />
      </Route>
    </Switch>
  </div>
</Router>

顺便说一句，我在堆栈中看到了一些类似的问题，但所有这些问题都没有有效的答案或对我不起作用。

更新：我有点放弃了。也许 React JS 还没有准备好托管 WebGl 或静态 html，或者我只是不知道如何做，但对于那些也被这个问题困扰的人，我有一个替代解决方案。只需将您的 WebGL 构建文件夹上传到 https://simmer.io 以临时托管它，直到经过测试的解决方案发挥作用。

【参考方案1】：

也许我没有完全理解这个问题。但是如何简单地创建一个带有显示该 html 文件的 iframe 的组件呢？我明白了，这个文件不是在你手里，而是从别处给的，所以你不能自己把它的内容放到组件中？