オンラインでwebpackプロダクションビルドをアップロードすると、ルーティングが機能しないのはなぜですか？

Question

私はこのウェブサイトをReactを使用して作っていますが、もちろん私はReact Routerを使ってルーティングしました。今では私の制作ビルドを作成してオンラインでアップロードしたときに、例えばen/signupへのリンクをクリックしても動作しませんでした。エラーページが見つかりませんでした。だから私はここで何が実際に間違っているのかなんて思っていた。私はバンドリングに何の問題もないと思います。 Btw、私もプロジェクトでRedux、React-Reduxを使っています。

TLDR：en/signupのようなURLへの移動は、本番環境では機能しません。

皆さん、これで私を助けてくれることを願っています。ありがとう。

Answer 1

ウェブパックの設定はどのようになっていますか？これを追加

試してください。リアクト（およびルータに反応）以来、私は、現在起こっていると信じて何

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/'      // <- this right here 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js)$/, use: 'babel-loader' }, 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} 
    ] 
    }, 
    devServer: {      // <-- and this object too 
    historyApiFallback: true, 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
}; 

は、あなたがURLに直接移動ならばということですが、まだロードされていない、彼らはの世話をすることはできませんURLのルーティング。したがって、ブラウザは静的リソースに移動してen/signupになりますが、もちろん何もありません。

上記の値をpublicPathに追加すると、ルートにリクエストを送信してから、すべてがロードされるとリクエストされたURLがパスされます。

舞台裏で何が起こっているのか分かりませんが、その効果は正しいと思います。