我正在使用react和express.js开发一个同构应用程序 . 我正在使用React Router进行客户端路由 . 在运行应用程序时，我在控制台中收到错误和警告
Warning ：propType失败：提供给 Route 的 object 类型的无效道具 handler ，预期 function .
Warning ：提供给 UnknownComponent 的 object 类型的未定义 handler 无效，预期为 function .
TypeError: type.toUpperCase is not a function
这是 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)));
});
});
5 回答
首先，看起来你正在使用0.13.3的React Router . 这很好，而且它是最新的稳定版本，但我建议你看一下切换到1.0.0-beta 3.两者之间的API发生了很大的变化，我认为更好 .
至于错误，当您引用
<Handler />时，'re getting, it means that you'传入一个实际上不是组件的对象 . 通常，当您忘记需要组件或在组件本身中使用module.exports时会发生这种情况 . 在0.13.3的文档中，看起来他们使用了<Root />组件，您使用了<Handler />. 也许尝试切换到<Root />？或者，如果您以某种方式将<Root />重命名为<Handler />在另一个文件中，请查看是否有任何问题 .或者，只需切换到1.0.0-beta3 . 它更好 .
当我遇到这个问题时，那是因为我忘了在我的组件中设置模块导出 .
我之前碰到过这个 . 很可能是组件中的语法错误 .
如果您还没有找到答案，请尝试将
res.send(React.renderToString((Html)));更改为res.send(React.renderToString(<Handler/>);希望有帮助！干杯 .我遇到了同样的问题 . 它期待Javascript并获得JSX . 所以你需要在调用
React.renderToString()之前转换它 .通过npm包含babel然后你可以在server.js的顶部添加
require('babel-core/register');.