在 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 部分。
我已经使用 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 部分。