web-dev-qa-db-ja.com

githubページにデプロイされたcreate-react-appのリンクに対して404を取得する

カスタムドメインを使用して、GitHubページの相対パスにcreate-react-appをデプロイしようとしています。例えば。 www.example.com/myproject

react-router-dom、react-router-redux、react-router-bootstrapを使用しています

ホームページをhttp://www.example.com/myprojectのpackages.jsonに設定し（homepage = "."も試しました）、履歴のベース名も設定しました：

...
export const history = createHistory({ basename: '/myproject' });
const middleware = [thunk, routerMiddleware(history)];
...
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
const store = createStore(rootReducer, initialState, composedEnhancers);

デプロイされたアプリはwww.mydomain.com/myprojectで動作し、アプリのリンクからナビゲートできます。

しかし、パスを直接入力しようとすると（例：www.example.com/myproject/account）、またはサブページでブラウザを更新すると、404が発生しました。

長期的な目標は、開発環境と製品環境に異なる相対パスを設定することです この答え で説明されていますが、最初に展開で機能させる必要があります。

react-routercreate-react-appreact-router-redux
10
szerte

問題：URLがサーバー側で評価される

ブラウザーのアドレスバーに新しいURLを入力するか、ページを更新すると、ブラウザーはそのURLのサーバー（この場合はGitHubページサーバー）を要求します。この時点では、クライアント側ルーター（react-router）はまだそのページに読み込まれていないため、アクションを実行できません。これで、サーバーは/accountsに一致するルートを検索します（ルーティングはクライアント側で行われるため）見つからず、404を返します。

解決

サーバーを制御できた場合は、すべてのルートにindex.htmlを提供できます。これはcreate react appのドキュメント クライアント側のルーティングでアプリを提供する で説明されています。 GitHubページの場合はそのコントロールがないため、これらを試すことができます。

簡単なソリューション

browserHistoryからhashHistoryに切り替えますこの変更により、URLは次のようになります

www.example.com/myproject/account

に

www.example.com/myproject/#/account

だから少し厄介です。

難しいソリューション

すべてのリクエストでGitHubページを取得してindex.htmlにリダイレクトします。基本的に、404.htmlにリダイレクトするコードを含むindex.htmlをビルドディレクトリに追加する必要があります。 その方法の詳細 。

作成Reactアプリには GitHubページのクライアント側ルーティングに関するドキュメント も含まれています

15
sudo bangbang

その理由は、ブラウザーがまだルーティングコードをキャッシュしていない可能性があるため、インデックス以外のルートに移動すると404エラーが発生するためです。

誰かがZEIT Nowを使用してデプロイしている場合の注意点（ghページは似ていますが）。私は（しばらくして）なんとかそれを修正する方法を考え出すことに成功しました。少し苦労したので、行き詰まった人のために記事を書くことにしました。

https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb

0
Jack