getComponent不渲染組件

Question

我嘗試使用react-router和webpack設置dynamic routing。 require.ensure函數加載模塊，但getComponent方法不提供組件。

在我的示例中，Button組件默認呈現（在主頁上）。當我點擊按鈕時，路由器將我重定向到/ admin url，並且我可以在我的Web控制檯中看到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也不會呈現。

通過看你的代碼，也許這就是你想要的配置：你可以閱讀更多關於組件如何在route configuration guide和Route API呈現

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

。

Answer 2

我認爲你不能像require('./components/label').default飛導入您的組件。你必須導入組件：

import Label from './components/label'; 

再到代碼：

cb(null, Label); 

source