Question

我最近升级到React v.1.14.0，ReactDOM v.0.14.0和React Router v.1.0.0-rc3，我正在努力应对以下错误。我已经在this和this帖子中阅读并尝试了解决方案，但我无法让它适用于使用ES6的代码。

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

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

这是来自我的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');
            }
    });
});

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

警告：React.createElement：type不应为null或未定义。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

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

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

Answer 2

感谢我得到的响应，我在react-router repo中打开了，我能够解决问题。出于某种原因，我正在加载两个React副本，一个版本为0.13.3，另一个版本为0.14.0。似乎Browserify导致了这一点，因为我能够通过向我的构建过程添加this issue来解决这个问题。所以我的gulp文件最终包括以下内容（将appengine-web.xml行添加到两个任务中。

.plugin(resolutions, '*')

一旦我添加了这个，问题就消失了。

在ES6中使用React Router的未捕获TypeError呈现<router>：type.toUpperCase不是函数

2 个答案: