我正在使用 react 和 express.js 开发同构应用程序。我正在使用 React Router 进行客户端路由。在运行应用程序时,我在控制台中收到以下错误和警告
警告:失败的 propType:提供给handler
的类型无效的 prop ,应为。object
Route
function
警告:提供给handler
的类型无效的未定义,预期。object
UnknownComponent
function
类型错误: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)));
});
});