將 React 應用發布到 Github 頁面但顯示空白頁面

Question

我已經使用 gh-pages 成功地將一個簡單的 React 應用程序上傳到 GitHub 頁面，現在我正在嘗試將 Shards 儀表板項目（ https://github.com/DesignRevision/shards-dashboard-react ）導入我的 GitHub 頁面，但是它只顯示一個空白頁。

以下是我目前掌握的信息：

1. 我的GitHub項目和頁面地址是

https://github.com/HarveyLijh/Company_ESG_Rating_App https://harveylijh.github.io/Company_ESG_Rating_App/

2. Shards 儀表板項目在我本地完美運行
3. 我的 package.json 看起來像這樣

4. 我的 chrome 檢查窗口看起來像這樣

5. 我已經運行npm run deploy來構建，它運行完美沒有錯誤
6. 我從最后一個命令將我新創建的構建文件夾上傳到我的 GitHub 存儲庫

為什么會這樣？

Answer 1

我仍然不知道為什么會出現這個問題，但是將 browserRouter 更改為 MemoryRouter

Answer 2

您需要了解 URL 的工作原理。 URL 是指向服務器上某些特定資源的路徑。 但是如何定位由 URL 指定的資源完全由服務器來解釋。 這種解釋被稱為“分辨率”。

服務器可以天真地將 URL 映射到本地文件系統路徑到硬盤上的物理文件。 例如http://localhost/foobar/dist/index.html可能指向像/etc/www/foobar/dist/index.html這樣的地方，如果你正在運行 nginx 或 apache 服務器。

它也可以是由服務器即時生成的內存文件。 PHP 服務器通常會這樣做。 http://localhost/home.php不是磁盤上的物理 HTML 文件。 但是服務器根據請求生成 HTML 內容。

現在中間有另一種方法，它可以解釋您的情況。

服務器可以解析主路徑：

• https://harveylijh.github.io/Company_ESG_Rating_App/

及其所有子路徑：

• https://harveylijh.github.io/Company_ESG_Rating_App/foo
• https://harveylijh.github.io/Company_ESG_Rating_App/foo/bar
• https://harveylijh.github.io/Company_ESG_Rating_App/zoo

所有這些路徑都指向同一個index.html文件： https : //raw.githubusercontent.com/HarveyLijh/Company_ESG_Rating_App/gh-pages/index.html ，它是磁盤上的物理文件。

服務器只向瀏覽器發送相同的 HTML。 當瀏覽器完成頁面加載時，JS 介入，讀取地址欄中的 URL，並進一步決定應該在 React 應用程序中呈現哪個“狀態”或“路由”。

這就是BrowserRouter工作原理。

瀏覽器將History API暴露給 JS。 使用該 API，JS 可以控制地址欄中顯示的 URL，而無需實際轉到另一個頁面。 換句話說，在地址欄中輸入 URL 並按 ENTER 鍵的默認行為暫時被禁用。 一直以來，你們都只是查看同一個index.html文件。

要支持BrowserRouter ，github 頁面服務必須首先支持上述將子路徑解析為同一index.html ，但不幸的是，這是不可配置的。

解決方案

有一個簡單的技巧：只需復制您的index.html並將其重命名為404.html ！

因為所有子路徑解析都會失敗，github 頁面將訴諸於顯示404.html ，瞧，問題解決了！

有關此 hack 的更多詳細信息，請參閱： https : //github.com/rafgraph/spa-github-pages