问题背景与挑战
在现代react单页应用开发中，有时会遇到需要集成现有遗留静态内容（如纯html、css、javascript和jquery页面）的需求。常见的挑战包括：
- 避免iFrame： 出于安全策略、SEO或用户体验考虑，通常不建议使用iFrame来嵌入内容。
- 避免重写： 对于仅包含少量页面或不经常更新的遗留代码，将其完全重写为React组件会耗费大量精力，且可能导致代码重复（React版本和非React版本并存），增加维护成本。
- 特定路由渲染： 需要确保这些静态内容能在React应用的特定URL路径下被访问。
针对这些挑战，寻找一种简单、高效且低耦合的解决方案至关重要。
解决方案：利用public目录静态服务
React项目（特别是使用Create React App创建的项目）提供了一个public目录，该目录下的所有文件在构建时会被直接复制到构建输出的根目录，并由Web服务器直接提供服务。这意味着这些文件可以通过相对于应用根路径的URL直接访问，而无需经过React的组件渲染流程。
1. 组织静态文件
首先，将您的遗留静态文件（HTML、CSS、JS、图片等）放置在React项目的public目录下。为了实现特定的路由效果，建议在public目录下创建与您期望的URL路径相对应的文件夹结构。
示例： 假设您希望通过/display/contact.html访问一个名为contact.html的静态文件。您应该将该文件放置在public/display/contact.html。
your-react-app/ ├── public/ │ ├── display/ │ │ └── contact.html <-- 您的遗留静态HTML文件 │ ├── index.html │ └── favicon.ico ├── src/ │ └── ... └── package.json
这样，当您的React应用部署后，contact.html文件就可以通过http://your-domain.com/display/contact.html直接访问。
2. 在React应用中链接到静态文件
在您的React组件中，您可以使用标准的HTML 标签来创建指向这些静态文件的链接。当用户点击这个链接时，浏览器会导航到该静态文件，而不是在React应用内部渲染它。
示例代码：
import React from 'react';
function MyComponent() {
return (
欢迎来到我的React应用
点击下方链接访问我们的遗留联系页面：
{/*
使用相对路径链接到public目录下的静态文件。
浏览器会直接导航到该URL。
*/}
查看联系方式
{/* 其他React组件内容 */}
);
}
export default MyComponent;3. 路由注意事项
需要明确的是，这种方法并非将静态内容“渲染”到React路由中，而是通过React应用提供一个入口，让浏览器直接导航到由Web服务器静态提供的文件。React Router等客户端路由库不会介入这些外部链接的导航。当用户点击链接时，浏览器会执行一次完整的页面加载，离开React应用的单页应用上下文。
注意事项与最佳实践
- 路径匹配： 确保public目录下的文件路径与您在标签中使用的href路径完全匹配。/开头的路径表示相对于Web服务器的根目录。
- 资源引用： 您的静态HTML文件内部引用的CSS、JavaScript或图片等资源，也应该使用相对于该HTML文件的路径，或者使用/开头的绝对路径（如果它们也在public目录下）。例如，如果contact.html引用了./styles.css，那么styles.css应该位于public/display/styles.css。
- SEO与用户体验： 这种方法会触发完整的页面刷新，而不是React的平滑路由切换。对于需要无缝用户体验的场景，可能需要重新评估。对于SEO，搜索引擎会像对待普通网页一样抓取这些静态页面。
- 与React交互： 由于静态页面独立于React应用运行，它们无法直接与React组件进行通信或共享状态。如果需要这种交互，您可能需要考虑更复杂的集成模式，例如微前端或自定义构建脚本来将静态内容部分打包到React组件中。
- 安全性： 放置在public目录下的所有文件都将是公开可访问的。请勿在此目录中放置任何敏感信息。
- 构建过程： 在生产环境中，public目录下的文件会随着React应用的构建一同部署。无需额外的配置。
总结
通过利用React项目的public目录来静态服务遗留文件，并从React组件中提供链接，我们能够以一种简单、高效且低成本的方式解决在React应用中集成现有静态内容的难题。这种方法避免了iFrame的限制和代码重写的负担，特别适用于那些不常变动且无需与React应用深度交互的独立静态页面。它提供了一个清晰的边界，允许React专注于其动态组件，而将静态内容的处理交由Web服务器完成。
