2017-03-13 14 views
0

私は反応アプリを作成するためにcreate-react-appを使用しました。 (Woohoo!)反応アプリの作成がgithubページで失敗する

私はそれを開発しているときにうまく動作します。

私は 'npm build'を実行し、python SimpleHTTPServerを使ってビルドフォルダをローカルにホストすると、アプリケーションはうまく動作します。また、ローカルにホストされている別のマシンでも動作します。

私はhttps://interpolated.github.io/ojclient/

HTMLのロード、JSの負荷、およびCSSの負荷でgithubのにアプリを構築、配備するGH-ページを使用し、まだページがレンダリングされません。コンソールエラーはありません。 jsが動作しないのとほぼ同じです。

githubでホストされているときにjsが実行されない理由はありますか?

何か助けがあれば、エラーメッセージなしでどこに行くのかを知ることは難しいです。

これは私が使用している反応ルータと関係がありますか?

答えて

2

JavaScriptが正しく動作し、ページも正しくレンダリングされます。もちろん、あなたは空白のページを期待していませんでした。空白ページをレンダリングする理由を調べるには、React devtools extensionを使用します。あなたがレンダリングされているものの要素を参照することができデベロッパーツールでReactタブに行く

React devtools elements

あなたが見ることができるように一致するルートが存在しないことを意味し<Router>nullが含まれています、。あなたは実際にどのルートが要求されているのか疑問に思うかもしれませんので、getCurrentLocation履歴のpropの機能を呼び出すことができます。選択された要素は、コンソール内の変数$rとして利用可能になり、そしてあなたが$r.props.history.getCurrentLocation()でそれを呼び出すことができます。

React devtools current location

今、あなたはルートが実際に/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セクションをご覧ください。

関連する問題