组件未安装:React-Router 1.0.0-rc1 + Redux

Question

我有一个使用React,Redux和React-Router 1.0.0-rc1的小型原型.原型使用Webpack进行代码分割.它目前使用getComponents和getChildRoutes异步加载其他路由,如下所示:

module.exports = {
  path: 'donations',

  getChildRoutes(location, cb) {
    require.ensure([], (require) => {
      cb(null, [
        require('./routes/Donation'),
      ]);
    });
  },

  getComponent(location, cb) {
    require.ensure([], (require) => {
      cb(null, require('./components/Donations'));
    });
  }
};

这工作正常,直到我点击嵌套路线donations/:id,看起来像:

module.exports = {
  path: ':id',

  getComponents (location, cb) {
    console.log('got it', cb); // debugging
    require.ensure([], (require) => {
      console.log('called it', cb); // debugging
      cb(null, require('./components/Donation'));
    });
  }
};

当我导航到这条路线(例如/donations/123)时,路由被触发,bundle.js文件被加载,并且两者都console.log出现在控制台中,所以我知道路由被加载到内存中.但是,组件未安装和呈现.

console.log的结果:

got it function (error, value) {
      done(index, error, value);
    }
called it function (error, value) {
      done(index, error, value);
    }

一级深度的异步路由很好,但嵌套过去不起作用.组件已加载,但似乎没有执行.

返回的组件包含Redux,Connect如下所示:

 function Connect(props, context) {
          _classCallCheck(this, Connect);
          _Component.call(this, props, context);
          this.version = version;
          this.store = props.store || c… 

更新:问题解决了

问题很简单.由于这是一个嵌套路由,因此路由器将嵌套组件传递给它的父组件this.props.children,我没有检查它.将其归结为对1.0.0-rc1的(稀疏)文档的误解.

Answer 1

我对如何react-router工作有一个基本的误解,因为当你使用嵌套(子)路由时,父组件需要将它们容纳为this.props.children:

之前

render() {
    let { DonationsComponent } = this.props
    return (
      <div>
        <h2>Donations</h2>
        <DonationsList donations={DonationsComponent} entities={entities} />
      </div>
    );
  }

在上面,render没有考虑到this.props.children,所以嵌套路线(捐赠)被拉入并连接,但没有渲染.

render() {
    let { children, DonationsComponent, entities } = this.props
    let child = <DonationsList donations={DonationsComponent} entities={entities} />
    return (
      <div>
        <h2>Donations</h2>
        {children || child}
      </div>
    );
  }

现在,当react-router拉入嵌套路由并将其传递给this.props.children该render函数时,该函数会执行正确的操作而children不是渲染child.