限制React-Router匹配特定路径：解决GitHub Pages路由冲突问题

我之前也碰到过完全一样的坑——把React+React-Router做的作品集部署到GitHub Pages根目录后，所有子仓库的演示站点全被主应用的路由给“截胡”了！核心原因就是BrowserRouter会捕获所有指向根域名的路径请求，哪怕这个路径其实属于另一个独立的子仓库GitHub Pages站点。

下面给你两个实用的解决方案，按需选就行：

方案一：改用HashRouter（最简单省心） #

HashRouter是靠URL的哈希部分（#后面的内容）来处理路由的，它完全不会干扰哈希前面的路径。也就是说，主应用的路由会变成 https://username.github.io/#/projects 这样的形式，而子仓库的 https://username.github.io/someOtherRepo 路径根本不会被主应用的路由捕获——因为哈希前面的路径会直接交给GitHub Pages处理。

修改起来超简单：

1. 从react-router-dom导入HashRouter：

import { HashRouter as Router, Routes, Route } from 'react-router-dom';

2. 把原来的BrowserRouter替换成Router（也就是HashRouter）：

function App() {
  return (
    <Router>
      {/* 你的路由配置 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/projects" element={<Projects />} />
        {/* 其他路由 */}
      </Routes>
    </Router>
  );
}

部署之后，子仓库的站点就能正常访问了，唯一的小缺点是URL里多了个#，但胜在零额外配置，省心到爆。

方案二：保留BrowserRouter，通过自定义404页面规避冲突 #

如果你想要干净的URL（不带#），可以用这个方法。核心思路是：让GitHub Pages在遇到子仓库路径时，别交给主应用的React路由处理，直接加载子仓库的内容。

步骤如下：

1. 确保BrowserRouter的basename配置正确：
   主应用的BrowserRouter默认basename="/"，这个不用改，保持默认即可：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router basename="/">
      {/* 你的路由配置 */}
    </Router>
  );
}

2. 在主应用的public目录下创建404.html文件：
   GitHub Pages有个特性：当找不到对应路径的文件时，会返回404.html。我们可以在这个文件里加一段脚本，判断当前访问的路径是不是子仓库的路径，如果是，就重定向到对应的子仓库站点；如果不是，就回到主应用首页。

   示例404.html内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>404 - Redirecting</title>
</head>
<body>
  <script>
    // 列出所有你的子仓库名称
    const subRepos = ['someOtherRepo', 'anotherDemoRepo'];
    const currentPath = window.location.pathname;

    // 检查当前路径是否属于子仓库
    for (const repo of subRepos) {
      if (currentPath.startsWith(`/${repo}`)) {
        // 重定向到子仓库的对应页面
        window.location.href = `https://username.github.io${currentPath}`;
        return;
      }
    }

    // 如果不是子仓库路径，回到主应用首页
    window.location.href = 'https://username.github.io/';
  </script>
</body>
</html>

3. 更新主应用的404路由：
   在React路由里加一个匹配所有路径的404页面，确保主应用自己的未知路径能正常显示：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/projects" element={<Projects />} />
  {/* 其他路由 */}
  <Route path="*" element={<NotFound />} />
</Routes>

4. 确认子仓库的GitHub Pages已正确配置：
   每个子仓库都要在GitHub仓库设置里开启GitHub Pages，选对分支（比如main或gh-pages）和部署目录。

这个方案能保持URL的整洁，但需要维护subRepos数组，每次新增子仓库都要更新这个列表。

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