getComponentはコンポーネントをレンダリングしません

Question

私はreact-routerとwebpackでdynamic routingを設定しようとしています。 require.ensure関数はモジュールを読み込みますが、getComponentメソッドはコンポーネントをレンダリングしません。

私の例では、Buttonコンポーネントがデフォルトで（ホームページ上に）レンダリングされます。ボタンをクリックすると、ルータが/ admin URLにリダイレクトされ、require.ensureに新しいチャンクがロードされていますが、Labelコンポーネントはレンダリングされません。

index.jsx

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import {Router, Route, useRouterHistory, browserHistory} from 'react-router'; 
import { createHashHistory } from 'history' 
import Button from './components/button'; 

let appHistory = useRouterHistory(createHashHistory)({queryKey: false}); 

ReactDOM.render(
    <Router history={appHistory} onUpdate={() => window.scrollTo(0, 0)}> 

    <Route path="/" component={Button} > 
     <Route path="index" getComponent={(nextState, cb) => { 
      require.ensure([], function (require) { 
       cb(null, require('./components/button').default) 
      })}} 
     /> 
     <Route path="admin" getComponent={(nextState, cb) => { 
      require.ensure([], function (require) { 
       cb(null, require('./components/label').default) 
      })}} 
     /> 
    </Route> 

    </Router> 
    , document.getElementById('content') 
); 

button.jsx

var React = require('react'); 

var bootstrap = require('bootstrap'); 
var bootstrapStyle = require("bootstrap/dist/css/bootstrap.css"); 

export default class Button extends React.Component { 

    constructor(props) { 
     super(props); 

     this.onRedirect = this.onRedirect.bind(this); 
    } 

    onRedirect(){ 
    this.context.router.push({ 
       pathname: `/admin` 
      }); 
    } 

    render() { 
    return <button className="btn btn-info" type="button" onClick={this.onRedirect}> 
     <span className="glyphicon glyphicon-refresh"></span> 
    </button>; 
    } 
} 

Button.contextTypes = { 
    router: React.PropTypes.object 
}; 

label.jsx

var React = require('react'); 

var bootstrap = require('bootstrap'); 
var bootstrapStyle = require("bootstrap/dist/css/bootstrap.css"); 

export default class Label extends React.Component { 
    render() { 
    return <span className="label label-default">Default</span>; 
    } 
} 

package.json

"dependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.18.0", 
    "babel-loader": "^6.2.7", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "bootstrap": "^3.3.7", 
    "css-loader": "^0.25.0", 
    "file-loader": "^0.9.0", 
    "history": "^2.0.1", 
    "html-webpack-plugin": "^2.24.1", 
    "http-server": "^0.9.0", 
    "jquery": "^3.1.1", 
    "less": "^2.7.1", 
    "less-loader": "^2.2.3", 
    "node-sass": "^3.10.1", 
    "npm-install-webpack-plugin": "^4.0.4", 
    "react": "^15.3.2", 
    "react-dom": "^15.3.2", 
    "react-router": "^3.0.0", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.13.3", 
    "webpack-dev-server": "^1.16.2", 
    "webpack-merge": "^0.15.0" 
    } 

Answer 1

あなたの問題はgetComponentまたはダイナミックルーティングが、あなたのルートの設定ではありません。 /adminにナビゲートする場合、react-routerはトップレベルルートと管理ルートに一致し、それに応じてレンダリングします：<Button><Label /></Button>。 Buttonはthis.props.childrenを表示しないため、Labelもレンダリングされません。あなたのコードを見ることによって

、多分これはあなたが望んでいたconfigです：

<Route path="/" component={props => <div>{props.children}</div>}> 
    <IndexRoute component={Button} /> 
    <Route path="index" /> 
    <Route path="admin" /> 
</Route> 

あなたがコンポーネントがroute configuration guideとRoute APIでレンダリングされるかについての詳細を読むことができます。

Answer 2

は、私はあなたがrequire('./components/label').defaultのような場で、あなたのコンポーネントをインポートすることはできませんと思います。コードに続い

import Label from './components/label'; 

：あなたは、あなたのコンポーネントをインポートする必要が

cb(null, Label); 

source