React项目执行npm run build后serve -s build出现白屏问题求助

问题描述 #

使用create-react-app创建的React应用，npm run start开发模式运行完全正常，但执行npm run build构建后，通过serve -s build启动项目，浏览器显示白屏。已尝试为BrowserRouter添加basename="/"、在package.json配置homepage，问题仍未解决。

相关代码 #

App.js

import React, { useEffect, useState } from "react";
import { Routes, Route, BrowserRouter } from "react-router-dom";
import axios from "axios";

// Components
import TransferFunds from "./TransferFunds";
import AdminTest from "./AdminTest";
import TransferFundsToPool from "./TransferFundsToPool";

// CSS
import "./App.css";

function App() {
  const [ipAddress, setIpAddress] = useState("");

  useEffect(() => {
    const fetchIpAddress = async () => {
      try {
        const response = await axios.get("https://api.ipify.org/?format=json");
        setIpAddress(response.data.ip);
      } catch (error) {
        console.log("Error fetching IP address:", error);
      }
    };

    fetchIpAddress();
  }, []);

  return (
    <>
      <div>
        <nav className="navbar">
          <div className="logo">Hopabot HOPTOKN</div>
          <ul className="nav-links">
            <div className="menu">
              <li>
                <a href="/">Transfer Funds</a>
              </li>
              <li>
                <a href="/TransferFundsToPool">Transfer Funds to Pool</a>
              </li>
              <li>
                <a href="/AdminTest">Audit</a>
              </li>
            </div>
          </ul>
        </nav>
      </div>
      <BrowserRouter basename="/">
        <Routes>
          <Route path="/" element={<TransferFunds />} />
          <Route
            path="/TransferFundsToPool"
            element={<TransferFundsToPool />}
          />
          <Route
            path="/AdminTest"
            element={<AdminTest ipAddress={ipAddress} />}
          />
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/Logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/Logo.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>HOPTOKN</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

解决方案 #

1. 替换原生a标签为React Router的Link组件 #

当前导航使用的原生<a>标签会触发页面全量刷新，破坏客户端路由逻辑，导致生产环境路由匹配失败。修改步骤：

• 导入Link组件：

  import { Routes, Route, BrowserRouter, Link } from "react-router-dom";
  

• 将导航中的<a>替换为<Link>：

  <li>
    <Link to="/">Transfer Funds</Link>
  </li>
  <li>
    <Link to="/TransferFundsToPool">Transfer Funds to Pool</Link>
  </li>
  <li>
    <Link to="/AdminTest">Audit</Link>
  </li>
  

2. 将导航组件移入BrowserRouter内部 #

目前导航在BrowserRouter外部，导致导航的路由跳转不受React路由管理。调整App.js的return结构：

return (
  <BrowserRouter basename="/">
    <div>
      <nav className="navbar">
        <div className="logo">Hopabot HOPTOKN</div>
        <ul className="nav-links">
          <div className="menu">
            <li>
              <Link to="/">Transfer Funds</Link>
            </li>
            <li>
              <Link to="/TransferFundsToPool">Transfer Funds to Pool</Link>
            </li>
            <li>
              <Link to="/AdminTest">Audit</Link>
            </li>
          </div>
        </ul>
      </nav>
    </div>
    <Routes>
      <Route path="/" element={<TransferFunds />} />
      <Route
        path="/TransferFundsToPool"
        element={<TransferFundsToPool />}
      />
      <Route
        path="/AdminTest"
        element={<AdminTest ipAddress={ipAddress} />}
      />
    </Routes>
  </BrowserRouter>
);

3. 检查静态资源路径 #

如果上述修改后仍白屏，打开浏览器控制台的Network标签，确认js、css等静态资源是否加载成功。若路径错误，在package.json中添加：

"homepage": ".",

然后重新执行npm run build，再用serve -s build启动。

4. 排查生产环境专属报错 #

部分代码在开发环境正常，但生产环境因压缩、变量混淆等出现错误。打开浏览器控制台的Console标签，查看是否有组件未导出、依赖缺失等报错，针对性修复。

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