已加载子路由但未呈现

Question

这是一个简单的网站，它使用react-router进行代码分割＆＃34;。我在这里上传了源代码：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>
  }
};

当我点击此链接时，地址栏中的网址会发生变化，routes/indices/index.js方法中的getComponent会被触发。

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;

但实际上，组件已加载但未呈现。 Web浏览器控制台中没有错误，但显示未更新。

目录/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'));