嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用 [英] Nested React router 4 routes not working on Webpack 3
问题描述
正如标题所暗示的那样，我无法获得类似的路线
As the tittle suggest i can't get routes like
<Route path="/events/:id" component={EventDetailRoute} />
工作，正如我读过的那样，index.html中的包必须是绝对的，但是我使用HtmlWebpackPlugin所以包作为相对路径被注入.
to work, and as i've read seems to be that the bundle in the index.html must be absolute, however i'm using the HtmlWebpackPlugin so the bundle gets injected as a relative path.
我尝试为 webpack 设置我的输出配置，如下所示:
I've tried to set my output config for webpack as follows:
output: {
path: path.resolve('dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
但这也行不通.
如果我尝试这条路线:http://localhost:8080/events/7，我在尝试查找 收到 404 错误>http://localhost:8080/events/index_bundle.js
If i try this route: http://localhost:8080/events/7, I'm getting a 404 error when trying to find http://localhost:8080/events/index_bundle.js
这是我的webpack.config:
const path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
webpack = require('webpack');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
})
module.exports = {
entry: './src/index.js',
output: {
path: "/" + path.resolve('dist', 'build'),
filename: 'index_bundle.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true,
hot: true,
publicPath: '/'
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
camelCase: 'dashes',
localIdentName: '[name]__[local]'
}
},
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: 'file-loader?name=[name].[ext]&outputPath=fonts/',
}
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'file-loader?name=[name].[ext]&outputPath=assets/',
}
}
]
},
plugins: [
HtmlWebpackPluginConfig,
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin()
]
}
我使用的是 webpack 3.1.0、webpack-dev-server 2.5.1 和 react-router-dom 4.1.1
Im using webpack 3.1.0, webpack-dev-server 2.5.1 and react-router-dom 4.1.1
推荐答案
将 <base href="/"/> 添加到 index.html 文件的 head 标签
Add <base href="/" /> to head tag of your index.html file
<head>
<meta charset="utf-8">
<title>React App Setup</title>
<base href="/" />
</head>
这篇关于嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
