首页 文章

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

提问于
浏览 次
7

我有一个使用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 都出现在控制台中，所以我知道路由被加载到内存中 . However ，未安装和呈现组件 .

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的（稀疏）文档的误解 .

reactjs react-router redux

1 回答

  • 7

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

    Before

    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 .

    回复于

相关问题