子路由加载但未呈现

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'));