React webpack 在刷新时显示空白页面

Question

我正在通过 express 提供我的静态文件，我可以看到它正在加载 index.html 但问题是，例如 localhost:8080/users，当我刷新页面时，.css 和 main.js 没有接缝加载，所以它 returns 空白页面.. 知道问题出在哪一晚吗？

我的app.js

 function App (){
      return (
          <div className="wrapper">
             <Routes>
              {routes.map(({ path, name, Component }, key) => (
                <Route exact path={path} key={key} element={Component} />
              ))}
              </Routes>
          </div>
        );
    }
    
    
    export default App

我的index.js:

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
    <BrowserRouter>
       <Routes>
       <Route path="*" element={<App />} /> 
      </Routes>
    </BrowserRouter>
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

这是我的 webpack：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');
require('dotenv').config({path:__dirname+'/../.env'})
module.exports = {
  entry: {
    app: path.join(__dirname, "/src/Index.js"),
  },

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },

  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: 'style-loader!css-loader'
       },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: "html-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        APP_API_URL : JSON.stringify(process.env.APP_API_URL)
      },
    }),
    new Dotenv(),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./src/index.html",
    }),

    new MiniCssExtractPlugin({
      filename: "app.css",
      chunkFilename: "[id].css",
    }),
  ],

  devServer: {
    historyApiFallback: true,
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: process.env.PORT_CLIENT, 
    open: true,
    stats: "errors-only",
  }
};

Answer 1

查看这个使用 React Router 完成的示例，并将其与您的应用进行比较。

https://stackblitz.com/edit/github-agqlf5?file=src%2Fmain.jsx

React webpack 在刷新时显示空白页面

React webpack showing blank page on refresh

reactjs

webpack