在使用React路由器时得到这个错误TypeError：type.toUpperCase不是函数
我正在开发一个使用react和express.js的同构应用程序。 我正在使用React路由器进行客户端路由。 运行应用程序时，我正在控制台中出现错误和警告
警告 ：失败propType：提供给Route ，期望function objecttypes的prop handler无效。
警告 ：提供给UnknownComponent期望function objecttypes的未定义handler无效。
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); }); } }
这里是component / 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))); }); });
首先，看起来你正在使用React Router的0.13.3。 这很好，它是最新的稳定版本，但我build议你看看切换到1.0.0 – testing版3. API之间已经改变了很多，我认为更好。
至于你得到的错误，这意味着当你引用<Handler />时，你传入的对象实际上不是一个组件。 通常，当您忘记需要组件或在组件本身中使用module.exports时，会发生这种情况。 在0.13.3的文档中，它们看起来像使用<Handler />的<Root />组件。 也许尝试切换到<Root /> ？ 或者，如果你不知何故在另一个文件中将<Root />重命名为<Handler /> ，那么看看你是否有任何问题。
或者，只需切换到1.0.0-beta3。 它更好。
当我遇到这个问题时，这是因为我忘记在我的组件中设置模块导出。
module.exports = <component-name>;
我之前遇到过这个。 很可能是组件中的语法错误。
如果你还没有find你的答案尝试改变res.send(React.renderToString((Html))); 到res.send(React.renderToString(<Handler/>);希望有帮助！欢呼声。
我面临同样的问题。 它正在期待JavaScript和获得JSX。 所以你需要在调用React.renderToString()之前将其转换。
通过npm包括babel，然后你可以简单地添加require('babel-core/register'); 在server.js的顶部。