将 React 应用程序发布到 Github 页面但显示空白页面答案

【问题标题】：Publish React App onto Github Page but Shows Blank Page将 React 应用程序发布到 Github 页面但显示空白页面
【发布时间】：2021-01-12 08:53:44
【问题描述】：

我已经使用 gh-pages 成功地将一个简单的 react 应用上传到 GitHub 页面，现在我正在尝试将 Shards 仪表板项目 (https://github.com/DesignRevision/shards-dashboard-react) 导入我的 GitHub 页面，但它只显示一个空白页面。

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

我的GitHub项目和页面地址是

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

Shards 仪表板项目在我的本地完美运行
我的 package.json 看起来像这样

我的 chrome 检查窗口如下所示

我已经运行npm run deploy 构建，它运行完美，没有错误
我通过最后一个命令将新创建的构建文件夹上传到我的 GitHub 存储库

为什么会这样？

【问题讨论】：

如果你在package.json中保留"homepage": "."，它应该可以工作，而browserRouter在github静态站点中不能很好地工作，你可以使用@987654329 @

标签： javascript html reactjs github github-pages

【解决方案1】：

我仍然不知道为什么会出现这个问题，但是将 browserRouter 更改为 MemoryRouter

【讨论】：

【解决方案2】：

您需要了解 URL 的工作原理。 URL 是指向服务器上某些特定资源的路径。但是如何定位由 URL 指定的资源完全取决于服务器来解释。这种解释被称为“决议”。

服务器可以天真地将 URL 映射到本地文件系统路径到硬盘上的物理文件。例如。如果您正在运行 nginx 或 apache 服务器，http://localhost/foobar/dist/index.html 可能指向 /etc/www/foobar/dist/index.html 之类的地方。

它也可以是由服务器即时生成的内存文件。 PHP 服务器通常会这样做。 http://localhost/home.php 不是磁盘上的物理 HTML 文件。但是服务器会根据请求生成 HTML 内容。

现在中间有另一种方法，可以解释你的情况。

服务器可以解析主路径：

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

及其所有子路径：

所有这些路径都指向同一个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

【讨论】：