React应用部署GitHub Pages后路由异常：仅显示Header组件

你的问题核心是GitHub Pages部署在子目录时，React Router的绝对路径未匹配实际子路径前缀，导致路由内容无法加载。以下是具体解决步骤：

1. 配置React Router的basename #

React Router的BrowserRouter需要指定basename属性，对应你的GitHub Pages子路径/moviewebsite。若路由根组件在index.js中渲染，修改代码如下：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

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

你的App组件内的路由路径无需修改，basename会自动为所有路由添加前缀，比如原路径/collection会变为/moviewebsite/collection，匹配GitHub Pages的实际访问路径。

2. 设置package.json的homepage字段 #

在项目根目录的package.json中添加homepage字段，指定GitHub Pages的访问地址：

{
  "homepage": "https://vladaes.github.io/moviewebsite/"
}

这一步确保React构建后的静态资源路径正确指向子目录，避免资源加载失败。

3. 处理GitHub Pages的刷新404问题 #

单页应用直接刷新子路由页面时，GitHub Pages服务器会返回404，需添加404.html文件解决：

• 在项目public目录下复制一份index.html，重命名为404.html。
• 当服务器找不到对应路径时，会加载404.html，React Router即可接管路由并正确渲染对应页面。

验证修改后的路由行为 #

完成上述步骤后，重新构建并部署项目：

1. 执行npm run build生成生产包
2. 用gh-pages工具重新部署（若之前使用该工具）

此时访问https://vladaes.github.io/moviewebsite/会正常加载首页，点击/collection等路由链接时，URL会变为https://vladaes.github.io/moviewebsite/collection，对应路由内容也能正常显示。

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