bundle.js не найден при обновлении страницы с идентификатором в ее URL

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

Похоже, вам нужна публичная (она же статическая) папка! Таким образом, ваши файлы всегда будут доступны из относительного местоположения.

Если это не обман, вот ответ от другого Stackru:

webpack.config.js

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

Answer 2

Это концепция клиентского и серверного кода. Если вы обновите свою страницу в середине пути, URL попадет на сервер, и он попытается найти тот метод на стороне сервера, которого нет, потому что он на стороне клиента. Для более подробного объяснения -

URL-адреса React-маршрутизатора не работают при обновлении или записи вручную