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 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