Reacts Route Splitting Code kann keinen Chunk laden

Question

Ich versuche vorwärts zu reagieren Route . Aber, nach dem Webpack Splitting Code, immer Chunk mit 404 laden.

Hier ist mein Router.

<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> 

Dann klicke ich auf den folgenden Link

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

i Dev Werkzeug wechseln, ich, dass es http laden gefunden:/localhost: 8080/message/10.chunk.js

so dass es 404 verursacht. Wer weiß, wie man die Route Config konfiguriert, um den Splittungscode korrekt zu machen?

Answer 1

Finall ist Ich habe die Lösung gefunden.

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__/' 
}, 

Sie möchten die publicPath definieren. Dann basiert das Webpack auf dem publicPath, um die Ressource zu laden.

Answer 2

scheint, wie es ein Fehler ist auf Router Beispiel reagieren fixiert ist, wo Taion sagt GetComponent mit nextstate rufen stattdessen statt Standort die auf der Route dieses

<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> 

einfach auf den Link Sie sicher, dass referred sein sollte Ihre Frage

wo der nextstate eine Typ RouterState

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