如何在React指定路由中渲染静态文件夹内的遗留代码（非iframe方式）

一、可行方案 #

1. 直接在React组件中加载public目录下的静态资源 #

将遗留静态文件夹直接放入React项目的public目录（该目录下的文件会被原样打包，不经过webpack编译），然后在目标路由的组件中，通过fetch获取HTML内容插入DOM，再手动加载关联的CSS和JS文件。

示例代码：

import { useEffect, useRef } from 'react';

const LegacyStaticPage = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    // 获取静态HTML内容
    fetch('/legacy/index.html')
      .then(res => res.text())
      .then(html => {
        if (!containerRef.current) return;
        
        // 插入HTML到组件容器
        containerRef.current.innerHTML = html;

        // 加载CSS文件
        const cssLink = document.createElement('link');
        cssLink.rel = 'stylesheet';
        cssLink.href = '/legacy/style.css';
        containerRef.current.appendChild(cssLink);

        // 按依赖顺序加载JS文件（先jQuery再自定义脚本）
        const jqueryScript = document.createElement('script');
        jqueryScript.src = '/legacy/jquery.min.js';
        jqueryScript.onload = () => {
          const customScript = document.createElement('script');
          customScript.src = '/legacy/app.js';
          containerRef.current.appendChild(customScript);
        };
        containerRef.current.appendChild(jqueryScript);
      });

    // 组件卸载时清理资源，避免全局污染
    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
        // 若静态JS引入了全局变量（如$），可在此清理：delete window.$;
      }
    };
  }, []);

  return <div ref={containerRef}></div>;
};

export default LegacyStaticPage;

路由配置：

import { Routes, Route } from 'react-router-dom';
import LegacyStaticPage from './LegacyStaticPage';

function App() {
  return (
    <Routes>
      <Route path="/legacy" element={<LegacyStaticPage />} />
      {/* 其他路由配置 */}
    </Routes>
  );
}

优点：配置零成本，静态文件修改后无需重新构建React应用，与其他使用场景保持版本一致；缺点：需手动维护资源加载顺序，全局变量可能与React环境冲突。

2. 通过webpack raw-loader导入静态资源 #

将静态文件放入src目录，使用raw-loader将HTML、CSS、JS转为字符串导入，在组件中插入DOM并执行脚本。

步骤：

1. 安装依赖：npm install raw-loader --save-dev
2. 配置webpack（Create React App需使用craco或eject后修改）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(html|css|js)$/i,
        include: path.resolve(__dirname, 'src/legacy'),
        use: 'raw-loader',
      },
    ],
  },
};

3. 组件实现：

import { useEffect, useRef } from 'react';
import legacyHtml from './legacy/index.html';
import legacyCss from './legacy/style.css';
import legacyJs from './legacy/app.js';
import jquery from 'jquery';

const LegacyPage = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (!containerRef.current) return;
    
    containerRef.current.innerHTML = legacyHtml;
    
    // 插入CSS
    const styleEl = document.createElement('style');
    styleEl.textContent = legacyCss;
    containerRef.current.appendChild(styleEl);
    
    // 注入全局依赖并执行JS
    window.$ = jquery;
    eval(legacyJs);

    return () => {
      containerRef.current.innerHTML = '';
      delete window.$;
    };
  }, []);

  return <div ref={containerRef}></div>;
};

export default LegacyPage;

优点：静态资源纳入webpack构建流程，版本管理更统一；缺点：需额外配置webpack，修改静态文件需重新构建React应用，eval执行脚本存在安全风险。

3. 独立静态服务+React代理转发 #

将遗留静态文件部署为独立静态服务（如Nginx、Express），在React项目中配置代理转发请求到该服务，组件中通过fetch加载资源（写法同方案1）。

优点：完全隔离静态资源与React环境，避免冲突；缺点：需额外维护一个服务，部署复杂度提升。

二、最简单整洁的实现方式：方案1（public目录+动态加载） #

理由： #

1. 配置成本最低：无需修改webpack配置或额外服务，仅需将静态文件夹放入public，编写少量组件代码即可实现。
2. 版本一致性保障：静态文件与其他使用场景完全共用，修改后无需同步，刷新页面即可生效。
3. 逻辑清晰易维护：资源加载流程直观，仅需处理HTML插入和依赖顺序，后续调整成本低。

注意事项： #

• 静态文件中的相对路径需改为根目录绝对路径（如/legacy/style.css），避免路由层级导致资源加载失败。
• 若存在全局变量冲突，可在组件卸载时清理相关全局属性；或给静态JS添加IIFE隔离作用域。
• 确保JS资源按依赖顺序加载（如先加载jQuery再加载自定义脚本），避免运行时错误。

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