将React App发布到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/

1. Shards仪表板项目可以在我的本地计算机上完美运行
2. 我的package.json看起来像这样

1. 我的Chrome检查窗口如下所示

1. 我已运行npm run deploy进行构建，并且运行正常，没有错误
2. 我从上一条命令将新创建的build文件夹上传到了我的GitHub存储库中

为什么会这样？

Answer 1

我仍然不知道为什么会发生此问题，但是将browserRouter更改为MemoryRouter

Answer 2

您需要了解URL的工作方式。 URL是指向服务器上某些特定资源的路径。但是如何找到URL指定的资源完全取决于服务器来解释。这种解释称为“分辨率”。

服务器可以简单地将URL映射到本地文件系统路径，再映射到硬盘上的物理文件。例如。如果您正在运行Nginx或Apache服务器，则def bfs_search(maze_size, start_point, end_point, grid_values, number_of_grids): #code for creating first node and adding to queue while True: #here we have the code to break the loop if queue gets empty and then finding the child pointer and creating child notes #this condition does not execute as it should if child_node.state not in frontier and child_node.state not in explored: if child_node.state == end_point: goal = True explored.appendleft(child_node) break else: frontier.appendleft(child_node) 可能指向http://localhost/foobar/dist/index.html之类的地方。

它也可以是由服务器即时生成的内存文件。 PHP服务器通常会这样做。 /etc/www/foobar/dist/index.html不是磁盘上的物理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

所有这些路径均指向同一http://localhost/home.php文件，该文件位于： https://raw.githubusercontent.com/HarveyLijh/Company_ESG_Rating_App/gh-pages/index.html，它是磁盘上的物理文件。

服务器仅将相同的HTML发送到浏览器。浏览器完成页面加载后，JS介入，读取了地址栏中的URL，然后进一步决定应在React应用程序中呈现哪个“状态”或“路线”。

index.html就是这样。

浏览器将History API暴露给JS。使用该API，JS可以控制显示在地址栏中的URL，没有实际上可以转到另一个页面。换句话说，暂时禁用在地址栏中输入URL并按ENTER键的默认行为。一直以来，你们都只是查看相同的BrowserRouter文件。

要支持index.html，github页面服务必须首先支持上述将子路径解析为同一BrowserRouter的行为，但是很遗憾，这是不可配置的。

解决方案

有一个简单的技巧：只需复制您的index.html并将其重命名为index.html！

因为所有子路径解析都将失败，并且github页面将诉诸于显示404.html，瞧，问题解决了！

有关此黑客的更多详细信息，请参见：https://github.com/rafgraph/spa-github-pages