javascript - Uncaught TypeError rendering 在 ES6 : type. toUpperCase 中使用 React Router 不是函数

Question

我最近升级到 React v. 0.14.0、ReactDOM v. 0.14.0 和 React Router v. 1.0.0-rc3，但我遇到了以下错误。我已经阅读并尝试了 this 中的解决方案和 this发布，但我无法让它适用于我使用 ES6 的代码。

在调用ReactDOM.render 方法时，错误发生在我的客户端app.js 中。

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import routes from './routes';
import createBrowserHistory from 'history/lib/createBrowserHistory';

let app = document.getElementById('app');
let history = createBrowserHistory();
ReactDOM.render(<Router routes={routes} history={history} />, app);

这是来 self 的 routes.js。

import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './components/App';
import Home from './components/Home';

export default (
    <Route path="/" component={App}>
        <IndexRoute component={Home} />
    </Route>
);

为了完整起见，这是我的服务器端渲染中间件，它似乎工作正常。

app.use(function(req, res) {
    match(
        { routes, location: req.path },
        (error, redirectLocation, renderProps) => {
            if (error) {
                res.send(500, error.message)
            } else if (redirectLocation) {
                res.redirect(302,
                             redirectLocation.pathname +
                             redirectLocation.search)
            } else if (renderProps) {
                let html = renderToString(<RoutingContext {...renderProps} />);
                let page = swig.renderFile('views/index.html', { html: html });
                res.status(200).send(page);
            } else {
                res.status(404).send('Not found');
            }
    });
});

当我检查客户端日志时，我在错误前看到以下警告:

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

真正的错误发生在ReactDefaultInjection模块中的autoGenerateWrapperClass函数的第三行。

function autoGenerateWrapperClass(type) {
  return ReactClass.createClass({
    tagName: type.toUpperCase(),
    render: function() {
      return new ReactElement(
        type,
        null,
        null,
        null,
        null,
        this.props
      );
    }
  });
}

Answer 1

根据我的经验，这通常发生在我的组件之一实际上是 null 或 undefined 时。