无法使用 react-router 和 webpack-dev-server 直接进入动态路由 [英] Cannot go directly to dynamic route with react-router and webpack-dev-server
问题描述
启动webpack-dev-server后,可以直接进入静态路由(如http://localhost:3456/one
),但不能直接进入动态路由(如http://localhost:3456/two/1234
).
我相信我在 webpack-dev-server 配置中遗漏了一些东西,但不确定是什么.
浏览器控制台输出这个错误:
GET http://localhost:3456/two/dev-bundle.js 404(未找到)拒绝执行来自 'http://localhost:3456/two/dev-bundle.js' 的脚本,因为它的 MIME 类型('text/html')不可执行,并且启用了严格的 MIME 类型检查
webpack.config.js
const path = require("path")const HtmlWebpackPlugin = require('html-webpack-plugin');const webpack = require("webpack")模块.出口 = {模式:发展",开发工具:评估源地图",入口: ["./index.js",],输出: {文件名:dev-bundle.js",},模块: {规则: [{测试:/\.jsx?$/,loader: "babel-loader",排除:/node_modules/,},],},插件: [新的 HtmlWebpackPlugin({模板:path.join(__dirname, "dev.html")}),新的 webpack.NamedModulesPlugin(),新的 webpack.HotModuleReplacementPlugin()],开发服务器:{historyApiFallback: 真,热:真的,端口:3456,统计数据:最小"}}
app.js
import React, { Component } from "react"从react-hot-loader"导入{热}import { BrowserRouter as Router, Switch, Route } from "react-router-dom"从./components/ComponentOne"导入 ComponentOne从./components/ComponentTwo"导入 ComponentTwoconst MyApp = () =>(<div><路由器><开关><路由精确路径="/" component={ComponentOne}/><路由精确路径="/one" component={ComponentOne}/><Route path="/two/:id" component={ComponentTwo}/></开关></路由器>
)导出默认热(模块)(MyApp)
ComponentTwo.js
import React, { Component } from "react"从react-router-dom"导入{链接}导出默认类 ComponentTwo 扩展组件 {使成为() {返回 (<div><h1>ComponentTwo 用于 {this.props.match.params.id}</h1>
)}}
感谢任何帮助.
我能够通过更新 webpack 配置的一部分来解决这个问题:
输出:{文件名:dev-bundle.js",publicPath: "/",//添加了这一行},
控制台错误仍然存在,但至少页面已加载.
After starting webpack-dev-server, I can go directly to a static route (e.g. http://localhost:3456/one
), but I cannot go directly to a dynamic route (e.g. http://localhost:3456/two/1234
).
I believe I am missing something in my webpack-dev-server config, but not sure what.
The browser console outputs this error:
GET http://localhost:3456/two/dev-bundle.js 404 (Not Found)
Refused to execute script from 'http://localhost:3456/two/dev-bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled
webpack.config.js
const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack")
module.exports = {
mode: "development",
devtool: "eval-source-map",
entry: [
"./index.js",
],
output: {
filename: "dev-bundle.js",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "dev.html")
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
historyApiFallback: true,
hot: true,
port: 3456,
stats: "minimal"
}
}
app.js
import React, { Component } from "react"
import { hot } from "react-hot-loader"
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import ComponentOne from "./components/ComponentOne"
import ComponentTwo from "./components/ComponentTwo"
const MyApp = () => (
<div>
<Router>
<Switch>
<Route exact path="/" component={ComponentOne} />
<Route exact path="/one" component={ComponentOne} />
<Route path="/two/:id" component={ComponentTwo} />
</Switch>
</Router>
</div>
)
export default hot(module)(MyApp)
ComponentTwo.js
import React, { Component } from "react"
import { Link } from "react-router-dom"
export default class ComponentTwo extends Component {
render() {
return (
<div>
<h1>ComponentTwo for {this.props.match.params.id}</h1>
</div>
)
}
}
Any help is appreciated.
I was able to resolve this by updating part of the webpack config:
output: {
filename: "dev-bundle.js",
publicPath: "/", // added this line
},
The console error remains, but at least the page loads.
这篇关于无法使用 react-router 和 webpack-dev-server 直接进入动态路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!