web-dev-qa-db-fra.com

react-router Uncaught TypeError: Impossible de lire la propriété 'toUpperCase' de non définie

J'essaie d'utiliser le routeur de réaction, mais lorsque j'écris, un itinéraire simple ne fonctionne pas et la console affiche Uncaught TypeError: Impossible de lire la propriété 'toUpperCase' de non définie.

Sinon, quand j'utilise sans le react-router qui fonctionne 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);

L'erreur provient de cette ligne de la bibliothèque de réactions

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

Vous utilisez des exemples de la version 1.0 bêta de la documentation, mais vous utilisez probablement la dernière version stable (0.13). Les documents dans master proviennent de la version 1.0 bêta, ce qui est source de confusion.

Lisez la documentation de la dernière version stable: https://github.com/ReactTraining/react-router/tree/master/docs

16
Dan Abramov

Je suppose que lorsque React.render est exécuté, le routeur n’est pas encore là. essaye ça

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

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

Je suis toujours en train de réfléchir, mais la première chose à vérifier est la version que vous utilisez et la documentation que vous utilisez. J'ai pu le faire fonctionner en procédant comme suit ...

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

En gros, ce que PhInside a dit, mais enveloppé dans window.onload

1
diomampo

Essayez <Route> au lieu de <Router> dans React.render().

0
whitetrefoil