React项目部署GitHub Pages后默认跳转异常，请求解决指向首页问题

我正在学习React，完成了一个项目并通过GitHub Pages部署。部署后，打开项目链接（https://shresthgour.github.io/textutils--React/）时，页面默认指向不存在的textutils--React页面，而非首页；但点击网站内的首页或关于页面时功能正常。希望打开该GitHub Pages项目链接时直接进入首页。

相关信息：

• 项目仓库：https://github.com/shresthgour/textutils--React
• GitHub Pages部署链接：https://shresthgour.github.io/textutils--React/

原因分析与解决方案 #

1. 配置React Router的basename属性 #

如果使用React Router管理路由，必须为路由组件设置匹配GitHub Pages仓库名称的基础路径：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter basename="/textutils--React">
      {/* 你的路由结构 */}
    </BrowserRouter>
  );
}

该配置会让路由基于仓库路径解析，访问项目根链接时将正确匹配首页路由。

2. 检查package.json中的homepage字段 #

确保项目根目录的package.json里设置了正确的homepage：

"homepage": "https://shresthgour.github.io/textutils--React/"

也可以使用相对路径（适配后续可能的路径变更）：

"homepage": "."

这个字段会影响打包后的资源引用路径和路由的基础定位。

3. 确认首页路由的匹配规则 #

确保路由配置中存在根路径的匹配项，直接指向首页组件：

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

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} /> {/* 根路径对应首页 */}
      <Route path="/about" element={<About />} />
      {/* 其他路由配置 */}
    </Routes>
  );
}

注意不要将首页路由设置为/textutils--React，basename已经处理了这个前缀。

4. 重新打包部署 #

修改配置后，重新执行打包命令：

npm run build

将build文件夹内的所有文件推送到GitHub Pages对应的分支（通常是gh-pages分支），等待部署完成后再次访问链接即可。

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