GitHub Pages部署React Router项目URL自动追加#/导致页面无法渲染

URL末尾自动追加#/是因为项目使用了HashRouter（哈希路由模式），这类路由会读取URL中#后的片段作为路由匹配依据。你当前配置的路由路径写在域名的路径层级，和哈希路由的匹配逻辑不重合，最终导致路由匹配失败、页面无法渲染。

二选一即可，优先选方案1，完全适配GitHub Pages静态托管规则，无需额外配置服务端。

方案1：调整HashRouter配置（推荐） #

• 找到项目路由入口文件（通常是index.js，即包裹App组件的根文件），给HashRouter组件添加basename属性，值为项目部署的子路径/gocomet-myntra-assignment，示例代码：

// 入口文件index.js
import { HashRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <HashRouter basename="/gocomet-myntra-assignment">
    <App />
  </HashRouter>,
  document.getElementById('root')
);

• 修改App.js中的路由规则，移除路径里的子路径前缀（前缀已经由basename统一处理），将首页路由的path="/gocomet-myntra-assignment"改为path="/"，商品详情路由保持path="/product/:id"即可。

注意：原代码中各组件末尾多余的逗号可以一并删除，避免页面渲染出无意义的逗号字符。

调整后的路由代码参考：

<CartProvider>
  <Switch>
    <Route path="/" exact>
      {console.log(cartIsShown)}
      {cartIsShown && <Cart onHide={hideCartHandler}></Cart>}
      <Navbar onClickCart={showCartHandler} onSearch={getSearchTerm} />
      <Middlebar />
      <div className="filter-product row">
        <FilterTab></FilterTab>
        <ProductPage searchTerm={searchedTerm}></ProductPage>
      </div>
    </Route>
    <Route path="/product/:id">
      {cartIsShown && <Cart onHide={hideCartHandler}></Cart>}
      <ProductDetail onClickCartBtn={showCartHandler}></ProductDetail>
    </Route>
  </Switch>
</CartProvider>

修改完成后重新部署，访问时URL会自动拼接为/gocomet-myntra-assignment/#/，路由可正确匹配首页规则，页面正常渲染，跳转商品详情时URL会自动拼接为/gocomet-myntra-assignment/#/product/[商品id]格式，刷新页面也不会出现404问题。

方案2：切换为BrowserRouter（history模式） #

如果不希望URL中出现#标识，可以将路由模式替换为BrowserRouter，但需要额外配置GitHub Pages的404重定向规则：

• 将入口文件的HashRouter替换为BrowserRouter，同样配置basename="/gocomet-myntra-assignment"
• 在项目public目录下新建404.html，写入重定向脚本将所有404请求转发到index.html
• 在index.html的head标签中添加路径处理脚本，解决重定向后路由参数丢失的问题
  该方案配置步骤更繁琐，静态托管场景下不推荐使用。

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