リロード/リフレッシュ時にreact jsアプリケーションページの404エラーを修正するURLをカプセル化

Question

私はreact jsを使用してサイトを作成しました。 browserHistoryを使用してローカルシステムで正常に動作していますが、プロダクションサーバーでは動作しません。初めて正しく読み込まれます。ページを更新すると、「ページが見つかりません」というエラーが表示されます。

私はhashHistoryを使用しようとしました。私の問題は解決しましたが、＃とランダムキーを含む複雑なURL hashHistoryが欲しくないので、私はより良い解決策を探しています。 apache2の溶液をお探し

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: __dirname, 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel' 
    }] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './', 
    port: 3000 
    } 
}; 

-

マイwebpack.config.jsコード（我々はそれがhttp://example.com/aboutのようなものをカプセル化し、http://example.com/#/about?_k=9yfmfqを好きではないしたいです）。ごめんなさい。

Answer 1

問題点初めてyourdomain.comをロードすると、サーバーはindex.htmlファイルをデフォルトで提供します。したがって、yourdomain.com/somethingを試してみると、サーバーはそのファイルを見つけようとしますが、そこには存在しないため404を送信します。すべてのページ要求をindex.htmlファイルにリダイレクトするようにサーバーを構成する必要があります。これはあなたのJavaScriptをロードし、その後すべてのルートではJavaScriptによって処理されるindex.htmlをするために、すべてのURLにリダイレクトされます

location/{ 
    try_files $uri /index.html; 
} 

- ここ

はsingle page applicationための簡単なnginx構成です。