I am trying to use the react-router but when I write a simple route doesn't work and the console show Uncaught TypeError: Cannot read property 'toUpperCase' of undefined.
Otherwise when I use without the react-router that work well
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);
The error is from this line of the react library
function autoGenerateWrapperClass(type) {
return ReactClass.createClass({
tagName: type.toUpperCase(), //<----
render: function() {
return new ReactElement(
type,
null,
null,
null,
null,
this.props
);
}
});
}
You are using examples from 1.0 Beta docs, but you are likely running the latest stable version (0.13). The docs in master are from 1.0 Beta, that's the source of confusion.
Read the docs for the latest stable version: https://github.com/ReactTraining/react-router/tree/master/docs
My guess is when React.render is execute, the Router is not there yet. try this
var routes = (
<Route handler={App}>
</Route>
);
Router.run(routes,(Root) => {
React.render(<Root/>, document.body);
});
I'm still wrapping my head around react-router, but the first thing I'd check is the version you're using and the docs your referencing. I was able to get it working by doing the following...
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')
)
});
};
Basically what PhInside said, but wrapped in window.onload
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With