when I first to use react-router, but page gives me this error below
React-router: type.toUpperCase is not a function
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'));
it seems nothing wrong from the document, some one could help me?
where error comes here
function autoGenerateWrapperClass(type) {
return ReactClass.createClass({
tagName: type.toUpperCase(),
render: function() {
return new ReactElement(
type,
null,
null,
null,
null,
this.props
);
}
});
}
The error you posted is cryptic but what it means is you are trying to render a component out of a variable that is not a real component. For example, you could do this and get the same kind of error:
render: function() {
var Thing = {}; // not a component
return <Thing />; // same error
}
In the code you posted, <Router>
maps to a variable that is a module, not a component. You can fix it with a new variable declaration:
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'));
I was getting the same error. Then I figure out that I did mistake while exporting my components. In one component I wrote module.export instead of module.exports. So, please check if you have done the same mistake.
change the require statements:
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
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