已发布React个人网站仅显空白背景，请求技术排查帮助

• 页面未显示任何内容，包括图标、文字或图形，仅能看到背景色
• 已解决gh-pages相关错误，网站已成功发布，但内容仍无法正常显示
• 网站地址：vidhishak15.github.io/portfolio/

我的代码 #

App.js #

import './App.scss';
import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Route>
    </Routes>
  )
}

export default App

Index.html #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="favicon.svg"/>
    <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="/portfolio/logo192.png"/>
    <link rel="manifest" href="/portfolio/manifest.json"/>
    <title>React App</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script defer="defer" src="/portfolio/static/js/main.7dc9b3c2.js"></script>
    <link href="/portfolio/static/css/main.17e05163.css" rel="stylesheet">
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script type="text/javascript">emailjs.init("3q1Utfo3iBzn0fhrL")</script>
</body>
</html>

排查方向 #

• 路由嵌套问题：确认Layout组件中是否引入并使用了react-router-dom的<Outlet />组件。嵌套路由的子组件（Home/About/Contact）需要通过Outlet才能渲染到Layout中，没有Outlet的话子组件不会显示。
• 组件有效性检查：检查Layout、Home等组件文件是否存在，路径是否正确，组件内部是否有正确的JSX输出（比如有没有return合法的DOM结构，是否存在语法错误）。
• 控制台错误排查：打开浏览器开发者工具（F12）的Console面板，查看是否有JavaScript报错，比如组件导入失败、路由API使用错误、资源加载失败等。
• 部署路径配置：确认package.json中是否配置了"homepage": "https://vidhishak15.github.io/portfolio/"，create-react-app部署到gh-pages必须配置这个字段，否则静态资源路径会出错。
• 样式隐藏问题：检查App.scss或各组件的样式文件，是否设置了display: none、opacity: 0、visibility: hidden等属性，导致内容被隐藏。

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