可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答5:

I faced the same issue. It is expecting Javascript and getting JSX. So you need to convert it before calling React.renderToString().

Include babel through npm and then you can simply add require('babel-core/register'); at the top of server.js.

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

标签

react

handler

require