javascript - link - React-router: type.toUpperCase no es una función

react router tutorial

Question

la primera vez que uso react-router, pero la página me da este error a continuación

React-router: type.toUpperCase no es una función

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

Parece que no hay nada de malo en el documento, alguien podría ayudarme?

donde viene el error aqui

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

Answer 1

El error que publicaste es críptico, pero lo que significa es que estás tratando de representar un componente de una variable que no es un componente real. Por ejemplo, podría hacer esto y obtener el mismo tipo de error:

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

En el código que publicó, <Router> asigna a una variable que es un módulo, no un componente. Puedes arreglarlo con una nueva declaración de variable:

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

Answer 2

Estaba recibiendo el mismo error. Luego me di cuenta de que me equivoqué al exportar mis componentes. En un componente escribí module.export en lugar de module.exports. Entonces, por favor verifica si has cometido el mismo error.

Answer 3

Si usa react-router v0.13.3, reemplace la ruta r en la ruta, de esta manera:

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

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

Answer 4

cambiar las declaraciones requeridas:

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