reactjs - BrowserRouter 未使用 url 参数打开
问题描述
我有以下路由器配置:
const App = () => (
<HashRouter>
<div className="app">
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/search" component={Search} />
<Route path="/details/:id" component={Details} />
<Route component={FourOhFour} />
</Switch>
</div>
</HashRouter>
)
当我加载http://localhost:8080/#/details/12345
我的组件详细信息时,会正确呈现;
如果我切换到 BrowserRouter,加载http://localhost:8080/details/12345
,我会得到一个空白页面: index.html 正确呈现,但我在控制台中收到以下错误:
拒绝应用来自 ' http://localhost:8080/details/public/style.css ' 的样式,因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型,并且启用了严格的 MIME 检查。
GET http://localhost:8080/details/public/bundle.js 404(未找到)1:1
拒绝执行来自
' http://localhost:8080/details/public/bundle.js ' 的脚本,因为它的 MIME 类型 ('text/html') 不可执行,并且启用了严格的 MIME 类型检查。
我正在学习在线课程,我正在使用 webpack,我认为我的所有配置都与课程中的配置相同,课程视频中的应用程序可以正常工作
我的 webpack.config.js 如下:
const path = require('path')
const webpack = require('webpack')
module.exports = {
context: __dirname,
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./js/ClientApp.jsx'
],
devtool: process.env.NODE_ENV === 'development' ? 'cheap-eval-source-map' : false,
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
publicPath: 'public/'
},
devServer: {
hot: true,
publicPath: '/public/',
historyApiFallback: true
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
stats: {
colors: true,
reasons: true,
chunks: true
},
plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin()],
module: {
rules: [
// {
// enforce: 'pre',
// test: /\.jsx?$/,
// loader: 'eslint-loader',
// exclude: /node_modules/
// },
{
test: /\.jsx?$/,
loader: 'babel-loader'
}
]
}
}
解决方案
推荐阅读
- javascript - 登录失败时收到登录警报
- python - 如果为该邮件帐户启用了 MFA,如何通过 python 脚本发送邮件?
- php - 无法使用 openssl_private_decrypt 解密任何消息
- c# - C# 和深拷贝中的 Elm 架构 (MVU)
- html - 画外音无法从选择下拉列表中发音非英语选项
- sql-server - 如何通过加入另一个表从数据中更新在xml中具有多个相同元素的表中的xml
- cordova - 安装`ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated`后无法构建我的Ionic项目
- python - 相同的命令但不同的结果,cmd和python子进程之间的奇怪行为
- libgdx - LibGDX / Box2D:如何跟踪身体之间的活动联系?
- arrays - 如何在反应中设置动态填充的选择选项的状态?TypeError:this.state.schoolName.map 不是函数