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

我已经使用gh页面成功地将一个简单的react应用程序上传到GitHub页面，现在我正在尝试将Shards dashboard project（）导入到我的GitHub页面，但它只显示一个空白页面

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

我的GitHub项目和页面地址是

Shards dashboard项目在我的本地服务器上完美运行

我的package.json如下所示

我的chrome inspect窗口是这样的

我已经运行了

npm run deploy

来构建，它运行得非常完美，没有错误

我从上一个命令将新创建的build文件夹上载到GitHub repo上

---

为什么会出现这种情况？

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

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

服务器可以简单地将URL映射到本地文件系统路径，再映射到硬盘上的物理文件。例如，

http://localhost/foobar/dist/index.html如果您运行的是nginx或apache服务器，

可能指向类似于

/etc/www/foobar/dist/index.html的地方

它也可以是由服务器动态生成的内存中文件。Php服务器通常会这样做<代码>http://localhost/home.php

不是磁盘上的物理HTML文件。但是服务器会根据请求生成HTML内容

现在还有另一种方法来解释你的处境。 服务器可以解析主路径：

及其所有子路径：

所有这些路径都指向相同的

index.html

文件，位于： ，这是磁盘上的物理文件

服务器只向浏览器发送相同的HTML。当浏览器加载完页面后，JS介入，读取地址栏中的URL，并进一步决定应该在React应用程序中呈现哪个“状态”或“路由”

这就是

BrowserRouter

的工作原理

浏览器向JS公开了该文件。有了这个API，JS可以控制地址栏中显示的URL，而不实际转到另一个页面。换句话说，在地址栏中输入URL并按ENTER键的默认行为将暂时禁用。一直以来，您都只是查看相同的

index.html

文件

要支持

BrowserRouter

，github页面服务必须首先支持上述将子路径解析到相同

index.html

的行为，但遗憾的是，这是不可配置的

解决方案 有一个简单的破解方法：只需复制您的

index.html

，并将其重命名为

404.html

Cus所有子路径解析都将失败，github页面将求助于显示

404.html

，瞧，问题解决了

---

有关此攻击的更多详细信息，请参阅：

如果您保留

“homepage”：“

在package.json中，它应该可以工作，而

browserRouter

在github静态站点中工作不好，您可以使用

hashRouter