bundle.js not found while refreshing the page having ID in it's URL

Question

I ran into a problem where I am redirecting a user into its corresponding profile page where the profile information is being displayed. Let's take for example http://localhost:8080/user/1. when I am redirecting the user using the link in the navbar the page is successfully rendering but while I am refreshing the page in the same URL (i.e. http://localhost:8080/user/1 ) I get an error saying that ERROR http://localhost:8080/user/bundle.js not found. I am new to react router v4 please help me out for this. Thanks in advance.

My webpack.config.js is

 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

Looks like you need a public (aka static) folder! This way your files will always be available from a relative location.

If it's not cheating, here's an answer from another StackOverflow:

webpack.config.js

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

Answer 2

It is the concept of clientSide and server side code. If you will refresh your page in middle of journey the url will hit to the server and it will try to find out that method in server side which is not there because it is on client side. For more explanation -

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