javascript - React-router:type.toUpperCase 不是函数

Question

当我第一次使用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
        );
      }
    });
  }

Answer 1

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

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