URLにIDを持つページをリフレッシュ中にbundle.jsが見つかりません

Question

プロファイル情報が表示されている対応するプロファイルページにユーザーをリダイレクトしているところで問題が発生しました。 たとえば、http://localhost:8080/user/1としましょう。 ナビゲーションバーのリンクを使用してユーザーをリダイレクトすると、ページのレンダリングに成功しましたが、同じURL（つまりhttp://localhost:8080/user/1）のページを更新しているうちに、ERROR http://localhost:8080/user/bundle.jsが見つかりませんでした。 私はルータv4に反応するために新しいです。私のためにこれを手伝ってください。 ありがとうございます。

私webpack.config.jsは、あなたがパブリック（別名静的）フォルダを必要とするように見える

var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var webpack = require('webpack'); 
var path = require("path"); 
var config = { 
entry: ["./src/index.tsx", 'webpack-dev-server/client?http://localhost:8080'], 
plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'index.ejs', 
     filename: 'index.html' 
    }), 
], 
output: { 
    path: path.resolve(__dirname, "build"), 
    filename: "bundle.js" 
}, 
resolve: { 
    extensions: [".ts", ".tsx", ".js"] 
}, 
devtool: 'source-map', 
module: { 
    rules: [ 
     { test: /\.tsx?$/, use: 'tslint-loader', enforce: 'pre' }, 
     { test: /\.tsx?$/, use: ['babel-loader', 'awesome-typescript-loader'] }, 
     { test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, 
     { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, use: 'url-loader?limit=1024&name=fonts/[name].[ext]' }, 
     { test: /\.(jpg|jpeg|gif|png)$/, use: 'url-loader?limit=10&mimetype=image/(jpg|jpeg|gif|png)&name=images/[name].[ext]' } 
    ] 
}, 
devServer: { 
    contentBase: path.join(__dirname, 'build'), 
    hot: true, 
    inline: true, 
    historyApiFallback: true 
    } 
}; 

module.exports = config; 

Answer 1

です！これにより、ファイルは常に相対的な場所から利用可能になります。

それはそれは、クライアント側とサーバ側のコードの概念であり、here's an answer from another StackOverflow:

webpack.config.js

output: { 
    // your stuff 
    publicPath: '/assets/' 
} 

Answer 2

をごまかしていない場合。途中でページをリフレッシュすると、URLがサーバーにヒットし、クライアント側にあるため、そこにないメソッドをサーバー側で見つけようとします。より詳細な説明については -

React-router urls don't work when refreshing or writting manually