组件未安装：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，所以嵌套路由（Donation）被拉入并连接，但没有渲染。

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.

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

Component not mounting: React-Router 1.0.0-rc1 + Redux

reactjs

react-router

redux

更新：问题已解决