刷新时反应应用程序崩溃[webpack，REACT]答案

【问题标题】：react app crashes on refresh [webpack , REACT ]刷新时反应应用程序崩溃[webpack，REACT]
【发布时间】：2020-10-25 00:35:19
【问题描述】：

所以我有这个反应 webpack 项目，我正在使用 webpack-dev-server 运行一切正常，但是当 url 有两层深并且我刷新页面时，应用程序崩溃了。
例如，如果我在http://localhost:8080/product/someProductId 或http://localhost:8080/checkout/information 刷新Failed to load resource: the server responded with a status of 404 (Not Found) 时出现此错误
但如果它的http://localhost:8080/shop 它不会在刷新时崩溃
这是我的 webpack 配置：

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');

module.exports ={
    entry :"./src/index.js",
    devServer:{historyApiFallback: true},
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:'index.js',
    },
    plugins:[
        new HTMLPlugin({template:'./src/index.html'}),
        new CopyPlugin({
            patterns: [
              { from: './src/images', to: 'images' },
            ],
          }),
    ],
    module:{
        rules:[
            { 
                test : /\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader"
                },
            },
            {
                test: /\.(png|gif|jpg)$/,
                include: [
                  path.join(__dirname, './src/images')
                ],
                loader: 'file-loader',
             },
            {
                test:/.(png|jpg|woff|woff2|eot|ttf|svg|gif)$/, 
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 100000000,
                    }
                  }
               ]
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
            },
            {
                test: /\.css$/i,
                loader: 'style-loader!css-loader' 
            },
        ]
    }
}

package.json 的脚本：

 "scripts": {
    "nodemon": "nodemon ./backEnd/app.js",
    "start": "webpack-dev-server --mode development --open --hot -inline --progress --content-base ",
    "build": "webpack --mode production",
    "watch": "webpack-dev-server --progress"
  },

【问题讨论】：

标签： reactjs webpack webpack-dev-server

【解决方案1】：

告诉 Webpack 开发服务器将所有服务器请求重定向到 /index.html。您需要在 webpack 配置中设置两个属性来执行此操作，publicPath 和 historyApiFallback。

publicPath: '/',
historyApiFallback: true,

publicPath 允许您为应用程序中的所有资产指定基本路径。 historyAPIFallback 会将 404 重定向到 /index.html。

这是一个例子：

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  devServer: {
    historyApiFallback: true,
  }
// rest of your config ...
};

更多详情请查看this

【讨论】：