React作品集应用部署GitHub Pages无组件显示问题排查

我用React开发了一个作品集应用，已经配置好GitHub Pages所需的部署代码。部署完成后没有报错，但页面除了背景色之外，没有任何组件内容显示。相关App.js代码如下：

import './App.scss';
import { Route, Routes } 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;

部署地址：https://gregwdumont.github.io/Portfolio/

问题原因及解决办法 #

1. 路由basename未适配GitHub Pages子路径

GitHub Pages部署在子路径/Portfolio/下，但react-router-dom默认使用根路径/匹配路由，导致路由不匹配，嵌套组件无法渲染。

解决： 在路由的最外层BrowserRouter中添加basename属性，值为仓库名称：

// 示例：在index.js中修改
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter basename="/Portfolio">
    <App />
  </BrowserRouter>
);

2. Layout组件未添加渲染子路由

嵌套路由的子组件需要通过Outlet来渲染，如果Layout组件中没有引入并使用Outlet，子路由的Home、About等组件就无法显示。

解决： 在Layout组件中添加Outlet：

// Layout.js示例代码
import { Outlet } from 'react-router-dom';
import './Layout.scss';

function Layout() {
  return (
    <div className="layout-container">
      {/* 这里可以放导航栏、页脚等公共布局 */}
      <Outlet /> {/* 子路由组件会渲染到这里 */}
    </div>
  );
}

export default Layout;

3. 验证GitHub Pages部署配置

确保package.json中的homepage字段设置正确，同时部署脚本配置无误：

{
  "homepage": "https://gregwdumont.github.io/Portfolio/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

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