React作品集部署GitHub Pages后特定项目图标跳转异常求助

核心问题原因 #

GitHub Pages部署的React单页应用（SPA）默认使用HTML5 History模式时，路由会优先被当前SPA的路由规则捕获。当你链接到同域名下的另一个GitHub Pages项目时，当前作品集应用的路由会误以为是内部路由，导致显示主页而非跳转目标项目——这就是问题仅在部署后出现、本地运行正常的原因：本地环境下两个项目是独立端口，不会触发路由拦截。

简易修复方案 #

1. 使用完整绝对链接并在新窗口打开（最快解决） #

修改Y.E.R项目图标的链接代码，确保使用目标项目的完整GitHub Pages绝对地址，同时添加target="_blank"让链接在新窗口打开，避开当前SPA的路由拦截：

<a href="https://<你的GitHub用户名>.github.io/YER/" target="_blank" rel="noopener noreferrer">
  {/* 你的Y.E.R图标组件 */}
</a>

• rel="noopener noreferrer"是安全规范，防止新窗口对原页面的恶意操作。

2. 给当前SPA路由添加外部跳转规则 #

如果希望在当前窗口打开目标项目，修改作品集项目的路由配置（比如React Router），新增一条重定向规则，把指向Y.E.R的路径直接导向外部地址：

import { Redirect, Route } from 'react-router-dom';

// 在路由列表中插入这条规则
<Route path="/YER" render={() => (
  <Redirect to={{ pathname: "https://<你的GitHub用户名>.github.io/YER/" }} />
)} />

这样当前SPA会识别到该路径是外部跳转，不会用内部路由解析。

3. 确认两个项目的基础路径配置正确 #

确保两个React项目的package.json里都正确设置了homepage字段，对应各自的GitHub Pages部署地址：

• 作品集项目的package.json：

  "homepage": "https://<你的GitHub用户名>.github.io/cp-retrofolio/"
  

• Y.E.R项目的package.json：

  "homepage": "https://<你的GitHub用户名>.github.io/YER/"
  

正确的基础路径能避免路由解析时的路径混淆。

是否需要更换部署方式？ #

不需要更换部署方式，上述方案已经能解决问题。如果后续有大量跨项目路由需求，也可以考虑把多个React项目部署到同一个GitHub Pages仓库的不同子路径下，但这会增加维护成本，远不如上述简易方案高效。

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