javascript - tutorial - react router web

react-router Uncaught TypeError: no se puede leer la propiedad ''toUpperCase'' de undefined

Question

Estoy tratando de usar el enrutador de reacción, pero cuando escribo una ruta simple no funciona y la consola muestra Uncught TypeError: No se puede leer la propiedad ''toUpperCase'' de undefined.

De lo contrario, cuando uso sin el enrutador de reacción que funciona bien

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

var App = React.createClass({
    render: function () {
        return (
            <div>Hello World</div>
        );
    }
});


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

El error es de esta línea de la librería reaccionar.

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

Answer 1

Está utilizando ejemplos de 1.0 Beta docs, pero es probable que esté ejecutando la última versión estable (0.13). Los documentos en master son de 1.0 Beta, esa es la fuente de confusión.

Lea los documentos para obtener la última versión estable: https://github.com/ReactTraining/react-router/tree/master/docs

Answer 2

Mi conjetura es que cuando se ejecuta React.render, el enrutador aún no está allí. prueba esto

 var routes = (
  <Route handler={App}>
  </Route>
);

Router.run(routes,(Root) => {
  React.render(<Root/>, document.body);
});

Answer 3

Pruebe <Route> lugar de <Router> en React.render() .

Answer 4

Todavía estoy envolviendo mi cabeza con el enrutador de reacción, pero lo primero que verifico es la versión que está usando y la documentación a la que hace referencia. Pude hacerlo funcionar haciendo lo siguiente ...

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

var App = React.createClass({
    render: function () {
        return (
            <div>Hello World</div>
        );
    }
});

var routes = (
    <Route handler={App}>
    </Route>
);

window.onload = function() {
    ReactRouter.run(routes, ReactRouter.HistoryLocation, function(Root, state) {
        React.render(
            <Root />,
            document.getElementById(''main'')
        )
    });
};

Básicamente lo que dijo PhInside , pero envuelto en la ventana.