React-router: type.toUpperCase не является функцией

когда я впервые использую agent-маршрутизатор, но страница дает мне эту ошибку ниже

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

Ответы

Ответ 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'));

Ответ 2

Я получал ту же ошибку. Затем я выясняю, что я ошибся при экспорте моих компонентов. В одном компоненте я написал module.export вместо module.exports. Итак, проверьте, не сделали ли вы такую же ошибку.

Ответ 3

измените требуемые утверждения:

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

Ответ 4

если вы используете response-router v0.13.3 замените Route r на Route, например:

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

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

Ответ 5

У меня была та же ошибка, это была зависимость от круга.

component1.jsx:

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

component2.jsx:

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

Как видно, это очевидно, но сообщение об ошибке очень непрозрачно.