我正在從 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",
}
};
uj5u.com熱心網友回復：
使用 React Router 查看這個完成的示例并將其與您的應用程式進行比較。
https://stackblitz.com/edit/github-agqlf5?file=src/main.jsx
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400847.html
上一篇：如何避免在react-app的生產構建中使用polyfill
下一篇：圖表js3雷達，如何啟用多行標簽