嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用
Posted
技术标签:
【中文标题】嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用【英文标题】：Nested React router 4 routes not working on Webpack 3 【发布时间】：2017-12-21 08:20:52 【问题描述】：正如标题所示，我无法获得类似的路线
<Route path="/events/:id" component=EventDetailRoute />
工作，正如我所读到的，似乎 index.html 中的包必须是绝对的，但是我 使用 HtmlWebpackPlugin 所以包作为相对路径注入.
我尝试将 webpack 的输出配置设置如下：
output:
path: path.resolve('dist'),
filename: 'index_bundle.js',
publicPath: '/'
,
但这也不起作用。
如果我尝试这条路线：http://localhost:8080/events/7，我在尝试查找 http://localhost:8080/events/index_bundle.js 时收到 404 错误 p>
这是我的 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
【问题讨论】：
您能描述一下您所说的不起作用吗？当您加载/ 并使用 <Link to="events/2" /> 时会发生什么
@azium 我已编辑问题以添加有关错误的更多详细信息
【参考方案1】：
将<base href="/" /> 添加到 index.html 文件的头部标签
<head>
<meta charset="utf-8">
<title>React App Setup</title>
<base href="/" />
</head>
【讨论】：
实时保存建议。谢谢 最好，你节省了我的时间。非常感谢。 你能简单解释一下答案吗？为什么它失败了，这条线如何解决问题？以上是关于嵌套的 React 路由器 4 路由在 Webpack 3 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章
React router 4 如何嵌套路由 /admin 和 /