Question

我正在使用react和express.js开发一个同构应用程序。我正在使用React Router进行客户端路由。在运行应用程序时，我在控制台中收到错误和警告

警告：propType：提供给handler的{{1}}类型的道具object无效，预计为Route。

警告：提供给function的{{1}}类型的未定义handler无效，预计为object。

TypeError：type.toUpperCase不是函数

以下是 components / main.jsx

的代码

UnknownComponent

以下是 components / routes.jsx

的代码

function

以下是服务器端呈现代码.. app.js

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);
      });
}
}

Answer 1

首先，看起来你正在使用0.13.3的React Router。这很好，而且它是最新的稳定版本，但我建议你看看切换到1.0.0-beta 3.两者之间的API发生了很大的变化，我认为它会更好。

对于您所获得的错误，这意味着您在引用<Handler />时传入的实际上不是组件的对象。通常，当您忘记需要组件或在组件本身中使用module.exports时会发生这种情况。在0.13.3的文档中，看起来他们使用了<Root />组件，您使用了<Handler />。也许尝试切换到<Root />？或者，如果您以某种方式在另一个文件中将<Root />重命名为<Handler />，请查看是否有任何问题。

或者，只需切换到1.0.0-beta3即可。它更好。

Answer 2

当我遇到这个问题时，那是因为我忘记在我的组件中设置模块导出。

module.exports = <component-name>;

Answer 3

我之前碰到过这个。很可能是组件中的语法错误。

Answer 4

如果您仍未找到答案，请尝试将res.send(React.renderToString((Html)));更改为res.send(React.renderToString(<Handler/>);希望有帮助！欢呼声。

Answer 5

我遇到了同样的问题。它期待Javascript并获得JSX。所以你需要在调用React.renderToString()之前进行转换。

通过npm包含babel，然后您只需在server.js的顶部添加require('babel-core/register');。

使用React路由器时出现此错误TypeError：type.toUpperCase不是函数

5 个答案: