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

Я столкнулся с проблемой, когда я перенаправляю пользователя на соответствующую страницу профиля, где отображается информация о профиле. Возьмем, к примеру, 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;

person Harish Soni    schedule 08.09.2017    source источник


Ответы (2)


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

Если это не мошенничество, вот ответ из другого StackOverflow:

webpack.config.js

output: {
    // your stuff
    publicPath: '/assets/'
}
person Frish    schedule 08.09.2017

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

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

person MukulSharma    schedule 08.09.2017
comment
Да, это так, но я сохраняю экземпляр для идентификатора пользователя 12 в своем хранилище избыточности после получения с сервера. - person Harish Soni; 08.09.2017