使用 React 路由器 TypeError: type.toUpperCase is not a function 时出现此错误答案

【问题标题】：Getting this error while using React router TypeError: type.toUpperCase is not a function使用 React 路由器 TypeError: type.toUpperCase is not a function 时出现此错误
【发布时间】：2015-10-16 01:34:12
【问题描述】：

我正在使用 react 和 express.js 开发一个同构应用程序。我正在使用 React Router 进行客户端路由。在运行应用程序时，我在控制台中收到以下错误和警告

警告：失败的 propType：提供给 Route 的类型为 object 的无效 prop handler，应为 function。

警告：提供给UnknownComponent 的object 类型的无效未定义handler，应为function。

TypeError: type.toUpperCase 不是函数

这是 components/main.jsx

的代码

var React = require('react');
var Counter  = require('./flashCard.js');
var RouterModule = require('react-router');
var RouteHandler = require('react-router').RouteHandler
var routes = require('./routes.js')
var APP = React.createClass({
  render: function() {
    return (
      <html>
        <head>
          <title>8 facts</title>
          <link rel="stylesheet" type="text/css" href="/stylesheets/style.css"/>
          <script src="/javascripts/bundle.js"></script>
        </head>
        <body>
         <RouteHandler/>
        </body>
      </html>
    );
  }
});

module.exports = APP;

if(typeof window !== 'undefined') {
  window.onload = function() {

      RouterModule.run(routes,RouterModule.HistoryLocation, function (Handler) { 
        React.render(<Handler/>, document);
      });
}
}

这是 components/routes.jsx

的代码

var React = require('react');
var Route = require('react-router').Route
var Counter = require('./flashCard.js');
var App = require('./main.js')
var Demo = require('./demo.js')

var routes = (

    <Route name="home" handler={App}>
        <Route path="/" handler={Counter}/>
        <Route path="/demo" name ="demo" handler={Demo}/>
    </Route>

);

module.exports = routes;

这是服务器端渲染代码.. app.js

var express = require('express');
var http = require('http');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
require('node-jsx').install();
var db = require('./models/schema.js');
var mongoose = require('mongoose');
var app = express();
var React = require('react');
var RouterModule = require('react-router')
var routes = require('./components/routes.js')
var posts = require('./routes/index.js');

//database
db.connectDB().then(function(){
            console.log('connected');
          }, function(err){
            console.log('error');
          });
//database

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
    extended: true
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/posts', posts);

//server side rendering code
    app.use(function(req, res) {
      RouterModule.run(routes, req.path, function(Handler) {
        var Html = React.createElement(Handler);
        res.send(React.renderToString((Html)));
      });
    });

【问题讨论】：

标签： node.js express reactjs react-router isomorphic-javascript

【解决方案1】：

首先，看起来您使用的是 0.13.3 的 React Router。没关系，它是最新的稳定版本，但我建议你看看切换到 1.0.0-beta 3。API 在两者之间发生了很大变化，我认为更好。

至于您遇到的错误，这意味着您在引用<Handler /> 时传入了一个实际上不是组件的对象。通常，当您忘记 require 组件或在组件本身中使用 module.exports 时，就会发生这种情况。在 0.13.3 的文档中，看起来他们使用了 <Root /> 组件，而您使用了 <Handler />。也许尝试切换到<Root />？或者，如果您在另一个文件中以某种方式将 <Root /> 重命名为 <Handler />，请查看那里是否有任何问题。

或者，只需切换到 1.0.0-beta3。好多了。

【讨论】：

【解决方案2】：

当我遇到这个问题时，是因为我忘记在我的组件中设置模块导出。

module.exports = <component-name>;

【讨论】：

【解决方案3】：

我以前遇到过这个。很可能是组件中的语法错误。

【讨论】：

我无法弄清楚组件中的错误在哪里......一切看起来都很好......

【解决方案4】：

如果您仍然没有找到答案，请尝试将 res.send(React.renderToString((Html))); 更改为 res.send(React.renderToString(<Handler/>); 希望有所帮助！干杯。

【讨论】：

【解决方案5】：

我遇到了同样的问题。它期待 Javascript 并获得 JSX。所以在调用React.renderToString()之前需要先转换一下。

通过 npm 包含 babel，然后你可以简单地在 server.js 的顶部添加require('babel-core/register');。

【讨论】：