如何让create-react-app的npm start默认打开指定静态网页？

以下是两种最小改动的实现方式，按需选择：

• 零源码改动：用元标签直接跳转
  直接编辑public/index.html，在<head>标签内添加一行跳转代码，应用启动后会立即跳转到目标静态页面，完全不需要碰src目录下的React代码：

  <meta http-equiv="refresh" content="0; url=/home-page/home-page.html">
  

  这里的content="0"表示立即跳转，数值可以改成其他秒数实现延迟跳转。

• 轻量源码改动：在React入口做重定向
  如果不想用元标签跳转，可在React入口文件里添加一行跳转逻辑：
  打开src/index.js（或src/main.jsx，取决于你的CRA版本），导入useEffect后添加跳转代码：

  import React, { useEffect } from 'react';
  import ReactDOM from 'react-dom/client';
  import './index.css';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
  
  // 新增：页面加载后跳转到静态网页
  useEffect(() => {
    window.location.href = '/home-page/home-page.html';
  }, []);
  

  要是你的项目已经用了React Router，也可以在App.js里设置默认路由重定向：

  import { Routes, Route, Navigate } from 'react-router-dom';
  
  function App() {
    return (
      <Routes>
        {/* 默认路由跳转到静态页 */}
        <Route path="/" element={<Navigate to="/home-page/home-page.html" />} />
        {/* 保留原有其他路由配置 */}
      </Routes>
    );
  }
  
  export default App;
  

两种方案对比：

• 元标签跳转是改动最小的方式，连React代码都不用碰，适合快速实现需求；
• 入口重定向更灵活，后续要切换回React页面时，只需要删除跳转代码即可。

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