在github页面上创建反应应用程序构建失败

Question

我使用create-react-app创建了一个反应应用。 （哇噢！）

当我开发它时，应用程序运行良好。

当我跑'npm build＆＃39;然后使用python SimpleHTTPServer在本地托管构建文件夹，该应用程序运行良好。它也适用于本地托管的另一台机器。

我使用gh-pages在https://interpolated.github.io/ojclient/

构建和部署应用程序到github

html加载，js加载和css加载但页面没有呈现。没有控制台错误。这几乎就好像js没有运行。

在github上托管时，js是否有任何原因无法运行？

任何帮助将不胜感激，没有错误信息，很难知道去哪里。

它可能与我正在使用的react-router有关吗？

Answer 1

JavaScript运行正常，页面也正确呈现。但当然你没想到一个空白页面。要找出呈现空白页面的原因，您可以使用React devtools extension。

转到devtools中的React标签，您可以看到呈现的元素：

正如您所看到<Router>包含null，这意味着没有匹配的路由。您可能想知道实际请求的路由，因此您可以调用历史记录的getCurrentLocation函数。所选元素在控制台中可用作变量$r，您可以使用$r.props.history.getCurrentLocation()调用它：

现在您知道路线实际上是/ojclient/，但您在your routes中没有。

如您所料，react-router是问题所在。您可以将主路线的根目录更改为/ojclient/，也可以使用自定义历史记录代替browersHistory，并在basename指定/ojclient/（请参阅{{ 3}}）。

请记住，GitHub页面不支持browserHistory使用的HTML5 pushstate API。要解决该问题，您可以查看Create React App的Customize your history further部分。