子路由加載但未呈現

Question

這是一個簡單的站點，利用react-router進行「代碼拆分」。我在這裏上傳了源代碼：https://github.com/wangjia184/log_viewer

在app.js中，定義了以下路由。

const rootRoute = { 
    component: 'div', 
    childRoutes: [ { 
    path: '/', 
    component: require('./routes/setting/view'), 
    childRoutes: [ 
     require('./routes/indices') 
    ] 
    }] 
}; 

在routes/setting/view，存在將用戶重定向的鏈接/indices

class SettingUI extends React.Component { 
    render() { 
    return <Link to={`/indices`} activeClassName="active">Go to /indices</Link> 
    } 
}; 

當我點擊這個鏈接，在地址欄中的URL改變了，getComponent內routes/indices/index.js方法被觸發。

module.exports = { 
    path: 'indices', 
    getComponent(location, cb) { 
    require.ensure([], (require) => { 
     cb(null, require('./view')); 
    }) 
    } 
} 

routes/indices/view.js應該呈現。

class IndicesUI extends React.Component { 
    componentWillMount() { 
    console.log('componentWillMount()'); 
    } 

    componentDidMount() { 
    console.log('componentDidMount()'); 
    } 

    componentWillUnmount() { 
    console.log('componentWillUnmount()'); 
    } 

    render() { 
    console.log('render()'); 
    return <h2>IndicesUI</h2> 
    } 
} 

console.log('IndicesUI is loaded'); 

module.exports = IndicesUI; 

但實際上，組件已加載但未呈現。網頁瀏覽器控制檯中沒有錯誤，但顯示沒有更新。

目錄/build包含由webpack生成的最終文件。

我很欣賞任何人看着這個。

修訂：

const loadContainerAsync = bundle => (location, cb) => { 
    bundle(component => { 
    cb(null, component); 
    }); 
}; 

ReactDOM.render((
    <Router history={hashHistory}> 
    <Route path='/' component={DefaultView}> 
     <Route path="indices" getComponent={loadContainerAsync(require('bundle?lazy!./components/indices'))} /> 
    </Route> 
    </Router> 
), document.getElementById('app-container')); 

Answer 1

我已經改變了你的app.js類似下面，它的工作在我結束

import React, {Component } from 'react'; 
import ReactDOM from 'react-dom' 
import { Router, Route, NotFoundRoute, hashHistory } from 'react-router' 

export default class Root extends Component { 

    render() { 
    const { history } = this.props; 
    var Data=[{path:"/",component:'./routes/setting/view'},{path:"indices",component:'./routes/indices/view'}]; 
    return (
     <Router history={history}> 
     {Object.keys(Data).map(function(m){ 
      return(
      <Route path={Data[m].path} component={require(Data[m].component)} /> 
     ) 
     })} 
     </Router> 
    ) 
    } 
} 
ReactDOM.render(<Root history={hashHistory} /> , document.getElementById('app-container'));