reactjs - 使用 Webpack 配置 React Router 5 不起作用
问题描述
我正在尝试为反应应用程序创建 webpack 构建,我的配置如下所示。
但是当我尝试在 .net 应用程序中运行构建文件时。路由器组件不工作。
我尝试了这些已经可用的解决方案,但仍然无法正常工作。
devServer: {
historyApiFallback: true,
}
output: {
...
publicPath: "/"
...
}
包.json:
"dependencies": {
"@craco/craco": "^6.3.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/d3": "^7.1.0",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/react-router": "^5.1.17",
"antd": "^4.16.13",
"axios": "^0.23.0",
"babel-plugin-import": "^1.13.3",
"craco-less": "^1.20.0",
"css-loader": "^5.2.6",
"d3": "^7.1.1",
"less-loader": "^10.1.0",
"moment": "^2.29.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"source-map-loader": "^3.0.0",
"style-loader": "^2.0.0",
"typescript": "^4.3.3",
"url-loader": "^4.1.1",
"web-vitals": "^1.0.1"
}
webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
target: "web",
mode: "development",
devServer: {
historyApiFallback: true,
},
output: {
// eslint-disable-next-line no-undef
path: path.resolve(__dirname, "../Scripts"),
filename: "reactWebpackOutput.js",
publicPath: "/"
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js", ".css", ".svg"],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true,
},
},
],
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
},
{
test: /\.(sass|less|css)$/,
use: [
{
loader: "style-loader",
},
{
loader: "css-loader",
},
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
use: ["url-loader"],
},
],
},
};
应用程序.tsx:
<Router>
<CustomHeader />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/about">
<About />
</Route>
</Switch>
</Router>;
我错过了什么?
解决方案
推荐阅读
- neural-network - 关于 LSTM 编码器解码器模型不起作用
- node.js - 仅从前端而不是从 MongoDB 中删除项目
- javascript - 删除数组内对象中的重复键并汇总每个状态Javascript的总数
- java - 问题调试生产者消费者问题
- c++ - 使用 C++ 解析复杂的文本文件
- javascript - 引导电子邮件输入中的wordpress jetpack不需要的边框
- java - 包含链接文本的下拉列表中的 getText() 返回空字符串
- python - 如何链接散景输入/控件以过滤数据?无法弄清楚如何使输入过滤掉视觉中显示的值
- php - 如何在实体实例中检索请求或语言环境?
- sql - 需要帮助在 Postgres 函数中设置 Json 键值