React router + webpack,子路由不工作
React router + webpack, sub routes not working
我正在尝试为我的应用程序设置我的路由器,并让基本/入口点正常工作(貌似)。似乎当我尝试开始添加子路线时,它正在中断。我现在有一个非常简单的设置。我正在使用 react + redux,我的渲染看起来像:
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} >
<Route path="/" component={comp1.Component}>
<Route path="test" component={comp2.Component} />
</Route>
</Router>
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('app')
);
我在 localhost:8080 上 运行 webpack 开发服务器,它可以毫无问题地提供第一条路线,但是当我去 localhost:8080/test 时,我得到一个 Cannot GET /test
。
这是我的 webpack 配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, ''),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
include: __dirname,
query: {
presets: [ 'es2015', 'react', 'react-hmre' ]
}
}]
}
}
不确定我在这里做错了什么,如果有任何帮助,我们将不胜感激。谢谢!
React Router 使用 HTML5 历史记录 API。这意味着 404 响应需要服务于 /index.html
.
文档 mention how this works。您需要将此添加到您的 module.exports
对象:
devServer: {
historyApiFallback: true
}
请注意,这仅适用于 CLI,当使用 Node.js API 时,您需要将其添加为第二个参数:
var server = new WebpackDevServer(compiler, { historyApiFallback: true });
我正在尝试为我的应用程序设置我的路由器,并让基本/入口点正常工作(貌似)。似乎当我尝试开始添加子路线时,它正在中断。我现在有一个非常简单的设置。我正在使用 react + redux,我的渲染看起来像:
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} >
<Route path="/" component={comp1.Component}>
<Route path="test" component={comp2.Component} />
</Route>
</Router>
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('app')
);
我在 localhost:8080 上 运行 webpack 开发服务器,它可以毫无问题地提供第一条路线,但是当我去 localhost:8080/test 时,我得到一个 Cannot GET /test
。
这是我的 webpack 配置:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, ''),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
include: __dirname,
query: {
presets: [ 'es2015', 'react', 'react-hmre' ]
}
}]
}
}
不确定我在这里做错了什么,如果有任何帮助,我们将不胜感激。谢谢!
React Router 使用 HTML5 历史记录 API。这意味着 404 响应需要服务于 /index.html
.
文档 mention how this works。您需要将此添加到您的 module.exports
对象:
devServer: {
historyApiFallback: true
}
请注意,这仅适用于 CLI,当使用 Node.js API 时,您需要将其添加为第二个参数:
var server = new WebpackDevServer(compiler, { historyApiFallback: true });