7

React、Redux、および React-Router 1.0.0-rc1 を使用した小さなプロトタイプがあります。プロトタイプは Webpack を使用してコード分割を行います。現在、次のように追加のルートを非同期ロードするためにgetComponentsandを使用しています。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'));
    });
  }
};

ネストされた route に到達するまで、これは正常に機能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);
    }

1 レベルの深さの非同期ルートは問題ありませんが、過去のネストは機能しません。コンポーネントはロードされていますが、実行されているようには見えません。

Connect返されるコンポーネントは、次のように Redux でラップされます。

 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 の (まばらな) ドキュメントを誤解していると考えてください。

4

1 に答える 1

7

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ます。

于 2015-10-03T12:31:58.953 に答える