我正常使用webpack打包程序,入口文件运行正确。如下:
路由:
<Router history={browserHistory}>
<Route path="/" component={App} >
<Route path="about" component={About} />
</Route>
</Router>
webpack配置
module.exports = {
entry: {
pc: path.resolve(__dirname,'pc.js'),
vendor: ['react']
},
output: {
path: path.resolve(__dirname,'./dist'),
filename: '[name].js'
},
resolve: {
extentions: ['', 'js', 'jsx']
},
plugins: [
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// }),
ExtractLess,
HtmlPlugin,
new webpack.optimize.CommonsChunkPlugin('vendor', 'js/react.js')
],
module: {
loaders: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
{
test: /\.js|jsx?$/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react','es2015']
}
},
{
test: /\.png|jpg$/,
loader: 'file-loader?limit=10240'
}
]
}
};
这种情况下可以正确的运行程序。但是如果我加上子路由,就会出错
如下:
<Router history={browserHistory}>
<Route path="/" component={App} >
<Route path="about/:id" component={About} />
</Route>
</Router>
或者是
<Router history={browserHistory}>
<Route path="/" component={App} >
<Route path="about" component={About}>
<Route path=":id" component={AboutDetail} />
</Route>
</Route>
</Router>
就会出现错误。错误的结果就是
求助大神,在线等,急!!
browserHistory需要对Web服务器进行配置。你可以先用hsahHistory来代替browserHistory。
更新
browserHistory的文档:
https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#browserhistory
文档里面写的还是挺清楚的, 如果要使用broswerHistory, 你的server必须进行设置. 按着文档里面的做应该不会有问题, 里面讲到的几种方法中nginx是最简单的.