getComponent не отображает компонент

Question

Я пытаюсь настроить dynamic routing с помощью ретранслятора и webpack. 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 реактивный маршрутизатор соответствует вашим маршрутам верхнего уровня и администратора и соответственно отображает: <Button><Label /></Button>. Так как Button не отображает this.props.children, Label не будет отображаться.

Глядя на ваш код, может быть, это конфиг вы хотели:

<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