如何將 React 站點作為項目添加到 GitHub 頁？

Question

我在 GitHub 頁 ( https://sirarchibald97.github.io ) 上有一個簡單的簡歷類型網站和一個名為hypstats-nea的 repo 中的 React 網站。 React 網站有多個“頁面”，它們是/hypstats 、 /hypstats/auctions和/hypstats/bazaar 。 當我將這個項目添加到我的 GitHub 頁面時，我可以通過轉到https://sirarchibald97.github.io/hypstats-nea來訪問該頁面，但是如果我然后單擊另一個頁面和 go 到/hypstats/auctions ，如果我刷新頁面，它會給我一個404 Page not found錯誤。 有辦法解決這個問題嗎？

這是我用來制作 React 網站的代碼。

App.js ：

class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <Navigation />
          <Switch>
            <Route path="/hypstats" exact component={() => <Home />} />
            <Route path="/hypstats/auctions" exact component={() => <AuctionViewer />} />
            <Route path="/hypstats/bazaar" exact component={() => <BazaarViewer />} />
          </Switch>
        </Router>
      </div>
    );
  }
}

Navigation.js ：

function Navigation(props) {
    return (
        <div className="navbar">
            <Link className="navlink" to="/hypstats">HypStats</Link> 
            <Link className="navlink" to="/hypstats/auctions">Auctions</Link>
            <Link className="navlink" to="/hypstats/bazaar">Bazaar</Link>
            <a href="https://sirarchibald97.github.io">Back</a>
        </div>
    )
}

Answer 1

BrowserRouter使用pushState 和朋友在頁面更新時更改瀏覽器中的 URL。

API 旨在表達“我已經更改了 URL 以匹配您直接向服務器詢問時會得到的結果”。

如果您正在使用它，您應該讓服務器實際傳送該內容。

有多種工具可以幫助解決這個問題，包括Next.js和Gatsby 。

Gatsby 旨在生成 static 個站點。 Next.js 旨在與 Node.js 提供的服務器端編程一起運行，但具有static HTML 導出功能。

Github Pages 僅支持 static 站點。

---

有些人編寫他們的 React 站點，以便為所有不指向 static 資產（圖像、樣式表等）的 URL 提供 HTML 的基本框架，它沒有內容但包含用於引導 React 應用程序的<script>元素。

這是一種骯臟的 hack，不會優雅地失敗。 Github 頁面也不支持它。

您可以通過為站點上的每個 URL 生成骨架 HTML 來獲得效果。

---

HashRouter使用 URL 的片段部分，而不是 History API。

這也使用了上一節中的框架 HTML，並且存在其中的大部分問題，但它並沒有假裝擁有單獨的 URL，也不需要生成多個文件。