React Route Splitting代碼無法加載塊

Question

我嘗試轉發React Route Huge App Example 。 但是，在webpack拆分代碼后，始終使用404加載塊。

這是我的路由器。

<Router history={appHistory} >
  <Route path='/' component={RootContainer}>
    <IndexRoute component={MainContainer}></IndexRoute>
    <Route path='/demo1' getComponent={(location, cb) => {
      require.ensure([], require => {
        cb(null, require('../../components/container/DemoContainer1.jsx').default);
      });
    }}/>
    <Route path='/message/:id' getComponent={(location, cb) => {
        require.ensure([], require => {
          cb(null, require('../../components/container/DemoContainer5.jsx').default);
        });
      }}>
    </Route>
  </Route>
</Router>

然后我點擊以下鏈接

 <Link to='/message/3'>Go</Link>

我切換到開發工具，發現它加載了http：/ localhost：8080 / message / 10.chunk.js

這樣就導致了404錯誤。有人知道如何配置Route Config才能正確生成拆分代碼？

Answer 1

最后，我找到了解決方案。

webpack.config.js

output: {
  path: __dirname + '/client/src/assets',
  filename: '[name].js',
  chunkFilename: '[id].chunk.js',
  publicPath: '/__build__/'
},
debug: true,
devtool: 'source-map',
devServer: {
  inline:true,
  contentBase: __dirname + '/client/src/assets',
  port: 3333,
  host: '127.0.0.1',
  historyApiFallback: true,
  publicPath: '/__build__/'
},

需要定義publicPath。 然后，webpack將基於publicPath加載資源。

Answer 2

似乎在React Router示例上已修復了一個錯誤，其中taion說用nextState調用getComponent而不是在Routes上定位，這應該是

    <Router history={appHistory} >
  <Route path='/' component={RootContainer}>
    <IndexRoute component={MainContainer}></IndexRoute>
    <Route path='/demo1' getComponent={(nextState, cb) => {
      require.ensure([], require => {
        cb(null, require('../../components/container/DemoContainer1.jsx').default);
      });
    }}/>
    <Route path='/message/:id' getComponent={(nextState, cb) => {
        require.ensure([], require => {
          cb(null, require('../../components/container/DemoContainer5.jsx').default);
        });
      }}>
    </Route>
  </Route>
</Router>

只需檢查您在問題中提到的鏈接

其中nextState是RouterState類型

  type RouterState = {
location:Location,
routes: Array<Route>,
params: Params,
components:Array<Component>
}