在 github 个页面上创建 React 应用构建失败

create react app build fails on github pages

我已经使用 create-react-app 创建了一个 React 应用程序。 (哇哦!)

应用程序 运行 在我开发它时很好。

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

我使用 gh-pages 构建应用程序并将其部署到 github https://interpolated.github.io/ojclient/

html 加载,js 加载,css 加载但页面未呈现。没有控制台错误。就好像 js 没有 运行.

在 github 上托管时,js 不会 运行 的原因有哪些?

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

会不会和我用的react-router有关?

JavaScript 运行正确,页面也正确呈现。但是,您当然不会期望出现空白页。要找出它呈现空白页面的原因,您可以使用 React devtools extension.

转到开发工具中的 React 选项卡,您可以看到渲染了哪些元素:

你可以看到<Router>中包含null,这意味着不存在匹配的路由。你可能想知道实际请求的路由是什么,所以你可以调用 history 属性的 getCurrentLocation 函数。所选元素在控制台中作为变量 $r 提供,您可以使用 $r.props.history.getCurrentLocation():

调用它

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

如您所料,react-router 是问题所在。您可以将主路由的根更改为 /ojclient/,也可以使用自定义历史记录而不是 browersHistory,其中您将 basename 指定为 /ojclient/(请参阅 Customize your history further).

请记住,GitHub 页面不支持 browserHistory 使用的 HTML5 推送状态 API。要解决该问题,您可以查看 Create React App 的 Notes on client-side routing 部分。