如何在Create React App的public目录使用HTML/JS文件并配置路由

架构老林

2026-8-14

解决方案

1. 放置静态资源到public目录

将你的HTML文件（命名为legacy-ui.html为例）、关联的JS文件（如script1.js、script2.js）、CSS样式文件全部复制到项目的public文件夹中。注意HTML内部的资源引用要使用相对路径，比如：

<!-- legacy-ui.html 中的资源引用示例 -->
<link rel="stylesheet" href="./styles.css">
<script src="./script1.js"></script>
<script src="./script2.js"></script>

2. 调整React Router配置

首先修正你当前App.js中的路由语法错误（原代码错误地将BrowserRouter命名为Routes），然后添加对应路由并创建组件加载静态HTML：

步骤2.1 创建加载静态页面的组件

在src/components目录下新建LegacyUI.js：

import React from 'react';

const LegacyUI = () => {
  return (
    <iframe 
      src="/legacy-ui.html" 
      style={{ width: '100%', height: '100vh', border: 'none' }}
      title="Legacy Interface"
    />
  );
};

export default LegacyUI;

使用iframe是最可靠的方式，能完整保留原HTML的JS交互、CSS样式和按钮功能。

步骤2.2 更新App.js路由

修改后的App.js代码：

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Home from './components/Home';
import About from './components/About';
import Signup from './components/Signup';
import LegacyUI from './components/LegacyUI'; // 引入新组件

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path='/' exact element={<Home />} />
        <Route path='/about' exact element={<About />} />
        <Route path='/signup' exact element={<Signup />} />
        {/* 添加静态页面路由 */}
        <Route path='/legacy-ui' element={<LegacyUI />} />
      </Routes>
    </Router>
  )
}

export default App;