为React路由渲染静态文件夹

Question

我的文件夹中有一些遗留静态代码（HTML、CSS、jQuery、JS 等）。现在，我需要在我的反应应用程序中的特定路线上呈现这些内容。由于某些政策原因，我无法使用 iFrame。我不想在 React 中重写它，原因有两个：

• 这是一个包含遗留代码的单页。不值得付出努力
• 这个静态文件夹也用在其他地方

所以，如果我用 React 重写它，那么我最终会得到两个版本：一个是页面的 React 版本，另一个是页面的非 React 版本。如果我想要改变，那么我需要更新两次。

我有什么选择？在我的 React 应用程序的文件夹内渲染静态文件而不使用 iFrame 的最简单且不那么混乱的方法是什么？

Answer 1

您可以在 public 目录中添加静态文件，并使用文件夹复制所需的路径，然后静态提供这些文件。如果路由是 /display，您可以添加一个名为 display 的文件夹。假设您的文件名为 contact.html，那么您的文件将位于 /display/contact.html 下。

通过react链接到文件

// ...
return (
  <a 
    href="/display/contact.html" 
    // if you want to open it in a new tab
    target="_blank" 
  />
);