React-router：type.toUpperCase 不是函数答案

【问题标题】：React-router: type.toUpperCase is not a functionReact-router：type.toUpperCase 不是函数
【发布时间】：2015-09-01 07:52:37
【问题描述】：

当我第一次使用 react-router 时，页面在下面给出了这个错误

React-router：type.toUpperCase 不是函数

var React = require('react');
var Router = require('react-router');

var Route = Router.Route;

var App = React.createClass({

  render: function() {
    return (
      <div>App</div>
    );
  }
});

React.render((
  <Router>
    <Route path="/" component={App} />
  </Router>
), document.getElementById('app'));

文件似乎没有问题，有人可以帮助我吗？

哪里出错了

function autoGenerateWrapperClass(type) {
    return ReactClass.createClass({
      tagName: type.toUpperCase(),
      render: function() {
        return new ReactElement(
          type,
          null,
          null,
          null,
          null,
          this.props
        );
      }
    });
  }

【问题讨论】：

请为错误添加堆栈跟踪。

标签： javascript reactjs react-router

【解决方案1】：

更改需求语句：

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

【讨论】：

仍然错误..这样会出现两个警告，例如警告：React.createElement：类型不应为空或未定义。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。 bundle.js:1730 警告：只有函数或字符串可以作为 React 组件挂载。
require 语句不应引起警告。顺便说一句：您上面的代码似乎不正确，所以您能创建一个小提琴吗？！或者发布你的整个代码？

【解决方案2】：

您发布的错误很神秘，但这意味着您正在尝试从不是真实组件的变量中渲染组件。例如，您可以这样做并得到相同类型的错误：

render: function() {
  var Thing = {};  // not a component
  return <Thing />;  // same error
}

在您发布的代码中，<Router> 映射到一个变量，该变量是一个模块，而不是一个组件。您可以使用新的变量声明来修复它：

var React = require('react');

var routerModule = require('react-router');
var Router = routerModule.Router;  // component

var Route = routerModule.Route;

var App = React.createClass({

  render: function() {
    return (
      <div>App</div>
    );
  }
});

React.render((
  <Router>
    <Route path="/" component={App} />
  </Router>
), document.getElementById('app'));

【讨论】：

我看到这个错误是因为我没有导出组件并且我正在尝试使用它。一旦我知道错误的含义就很容易找到，谢谢。

【解决方案3】：

我遇到了同样的错误。然后我发现我在导出组件时犯了错误。在一个组件中，我编写了 module.export 而不是 module.exports。所以，请检查您是否犯了同样的错误。

【讨论】：

【解决方案4】：

如果你使用 react-router v0.13.3 在 Route 上替换 Router，像这样：

var routes = (
  <Route>
    <Route path="/" component={App} />
  </Route>
);

Router.run(routes, function(Root) {
 React.render(<Root />, document.getElementById('app'));
});

【讨论】：

能否请您详细说明您的答案，添加更多关于您提供的解决方案的描述？
不，我不能，因为我不会说英语，请看documentation

【解决方案5】：

我也有同样的错误，是循环依赖。

component1.jsx：

var Component1 = require('./component2.jsx');

component2.jsx：

var Component2 = require('./component1.jsx');

这样看，这很明显，但是错误信息很不透明。

【讨论】：