React webpack刷新时显示空白页面

Question

我从express提供静态文件，我可以看到它加载了index.html但问题是，当在路由上(例如localhost:8080/users(，我刷新页面时，.css和main.js不会被加载，因此它返回空白页面。。知道什么晚上有问题吗？

我的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')
);

这是我的网络包：

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