Getting this error while using React router TypeError: type.toUpperCase is not a function

问题

I am developing an isomorphic app using react and express.js. I am using React Router for client side routing. While running the app i am getting following errors and warnings in console

Warning: Failed propType: Invalid prop handler of type object supplied to Route, expected function.

Warning: Invalid undefined handler of type object supplied to UnknownComponent, expected function.

TypeError: type.toUpperCase is not a function

Here is code for 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);
      });
}
}

Here is code for 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;

Here is server side rendering code.. 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)));
      });
    });

回答1:

First off, it looks like you're using 0.13.3 of React Router. That's fine, and it is the most recent stable version, but I suggest you take a look at switching over to 1.0.0-beta 3. The API has changed a lot between the two, I think for the better.

As to the error you're getting, it means that you're passing in an object that is not actually a component when you are referencing <Handler />. Often, this occurs when you forget to require a component, or to use module.exports in the component itself. In the docs for 0.13.3 it looks like they use the <Root /> component where you've used <Handler />. Perhaps try switching to <Root />? Or, if you're somehow renaming <Root /> to <Handler /> in another file, look there to see if you've got any issues.

Or, just switch to 1.0.0-beta3. It's much nicer.

回答2:

When I ran into this issue, it was because I forgot to set the module exports in my component.

module.exports = <component-name>;

回答3:

I ran into this before. Most likely a syntax error in your component.

回答4:

If you still havent found your answer try changing res.send(React.renderToString((Html))); into res.send(React.renderToString(<Handler/>); hope helps! cheers.