React router + webpack，子路由不起作用

Question

我正在尝试为我的应用程序设置路由器，并使基本/入口点正常工作（似乎）。似乎当我尝试开始添加子路由时，它正在中断。我现在有一个非常直接的设置。我正在使用 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' ]
      }
    }]
  }
}

不确定我在这里做错了什么，将不胜感激任何帮助。谢谢！

Answer 1

React Router 使用 HTML5 历史 API。这意味着需要提供 404 响应/index.html。

文档提到这是如何工作的。您需要将其添加到您的module.exports对象中：

devServer: {
  historyApiFallback: true
}

请注意，这仅适用于 CLI，当使用 Node.js API 时，您需要将其添加为第二个参数：

var server = new WebpackDevServer(compiler, { historyApiFallback: true });