我正常使用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
browserHistory
Browser history is the recommended history for browser application with React Router. It uses the History API built into the browser to manipulate the URL, creating real URLs that look like example.com/some/path.
Configuring Your Server
Your server must be ready to handle real URLs. ......
文档里面写的还是挺清楚的, 如果要使用broswerHistory, 你的server必须进行设置. 按着文档里面的做应该不会有问题, 里面讲到的几种方法中nginx是最简单的.