React部署Github Pages问题：网站首页未默认显示Home组件

1. 移除重复的HashRouter实例 #

你的代码在index.js中已经用HashRouter包裹了整个App，但在App.js里又嵌套了一个HashRouter（别名Router），这会导致路由上下文冲突，引发着陆页异常。修改App.js，移除内部的Router：

import Navbar from "./components/Navbar";
import { Routes, Route} from 'react-router-dom' // 移除HashRouter导入
import './App.css';
import Services from './components/pages/Services'
import Gallery from './components/pages/Gallery'
import About from './components/pages/About'
import ContactUs from './components/pages/ContactUs'
import Interior from './components/pages/Interior'
import Exterior from './components/pages/Exterior'
import DoorTrim from './components/pages/DoorTrim'
import DecksFences from './components/pages/DecksFences'
import Home from './components/pages/Home'
import SimpleSlider from "./components/SimpleSlider";
import Footer from "./components/Footer";

function App() {
  return (
    <div className="App">
      {/* 移除外层的<Router> */}
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />} /> {/* React Router v6无需exact */}
        <Route path='/services'  element={<Services />} />
        <Route path='/gallery'  element={<Gallery />} />
        <Route path='/about'  element={<About />} />
        <Route path='/contact-us'  element={<ContactUs />} />
        <Route path='/interior'  element={<Interior />} />
        <Route path='/exterior'  element={<Exterior />} />
        <Route path='/door-trim-painting'  element={<DoorTrim />} />
        <Route path='/decks-fences'  element={<DecksFences />} />
      </Routes>
    
      <SimpleSlider />
      <Footer />
    </div>
  );
}

export default App;

2. 修正package.json的homepage配置 #

GitHub Pages的homepage需要指向部署后的实际访问地址，而非仓库地址。修改package.json中的homepage字段：

{
  "homepage": "https://aero8991.github.io/summit-view-painting",
  // 其他内容保持不变
}

3. 重新部署项目 #

执行以下命令重新构建并部署：

npm run deploy

完成后访问对应地址，着陆页应该会正确加载预设的Home组件。

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