Github Pages部署React应用使用HashRouter出现空白页、路由404问题咨询

你的故障是HashRouter配置规则误用、跳转逻辑不匹配共同导致的，具体原因：

1. HashRouter的basename属性作用于哈希（#）之后的路径前缀，你填写的/Landing-Page是Github Pages仓库对应的域名子路径，属于哈希之前的部分，配置后会导致路由匹配规则偏移：根路由实际需要匹配#/Landing-Page/才能渲染，你访问的#/没有对应路由，自然显示空白。
2. 你当前跳转用的是原生<a>标签，不会走React路由逻辑，直接触发浏览器页面跳转，Github Pages上不存在/about对应的静态文件，就会返回404错误。

• 第一步：修改App.js中的HashRouter配置，删除basename属性：

function App() {
  return (
    <div className="Container-fluid" id="div2">
      {/* 去掉basename参数 */}
      <HashRouter>
        <Header />
        <Routes>
          <Route path="/thankyou" element={<ThankYou />} />
          <Route
            exact
            path="/"
            element={
              <div className="Container">
                <SignUp validate={validate} />
                <EbookInfo />
              </div>
            }
          />
          <Route path="/about" element={<About />} />
        </Routes>
      </HashRouter>
    </div>
  );
}

• 第二步：替换所有路由跳转逻辑，把原生<a href="xxx">标签替换为react-router-dom提供的Link组件：

// 先导入组件
import { Link } from 'react-router-dom'
// 跳转写法示例
<Link to="/about">关于页面</Link>

• 第三步：确认package.json顶层配置了正确的homepage字段：

"homepage": "https://alexhmar.github.io/Landing-Page"

• 第四步：重新执行构建和gh-pages部署命令，部署完成后访问路径格式为域名/Landing-Page/#/about即可正常访问，根路径也会正常渲染首页组件。

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