webentwicklung-frage-antwort-db.com.de

reaktiver Router Nicht erfasst TypeError: Die Eigenschaft 'toUpperCase' von undefined kann nicht gelesen werden

Ich versuche den Reakt-Router zu verwenden, aber wenn ich schreibe, funktioniert eine einfache Route nicht und die Konsole zeigt Uncught TypeError: Kann die Eigenschaft 'toUpperCase' von undefined nicht lesen.

Ansonsten wenn ich ohne den reakt-Router benutze, funktioniert das gut

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

Der Fehler stammt aus dieser Zeile der Antwortbibliothek

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

Sie verwenden Beispiele aus 1.0 Beta-Dokumenten, führen jedoch wahrscheinlich die neueste stabile Version (0.13) aus. Die Dokumente in master sind aus 1.0 Beta, das ist die Quelle der Verwirrung.

Lesen Sie die Dokumentation zur neuesten stabilen Version: https://github.com/ReactTraining/react-router/tree/master/docs

16
Dan Abramov

Ich vermute, wenn React.render ausgeführt wird, ist der Router noch nicht da. Versuche dies

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

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

Ich wickle meinen Kopf immer noch um den Reaction-Router, aber das erste, was ich überprüfen würde, ist die Version, die Sie verwenden, und die Dokumente, die Sie referenzieren. Ich konnte es mit den folgenden Schritten zum Laufen bringen ...

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

Grundsätzlich was PhInside gesagt, aber in window.onload eingewickelt

1
diomampo

Versuchen Sie <Route> anstelle von <Router> in React.render().

0
whitetrefoil