我正在尝试使用react-router但是当我编写一个简单的路由时不起作用并且控制台显示Uncaught TypeError:无法读取未定义的属性'toUpperCase'。
否则,当我在没有反应路由器的情况下使用时效果很好
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);
错误来自反应库的这一行
function autoGenerateWrapperClass(type) {
return ReactClass.createClass({
tagName: type.toUpperCase(), //<----
render: function() {
return new ReactElement(
type,
null,
null,
null,
null,
this.props
);
}
});
}
答案 0 :(得分:16)
您正在使用1.0 Beta文档中的示例,但您可能正在运行最新的稳定版本(0.13)。掌握的文档来自1.0 Beta,这是混淆的源头。
阅读最新稳定版的文档:https://github.com/ReactTraining/react-router/tree/master/docs
答案 1 :(得分:1)
我的猜测是当React.render执行时,路由器还没有。试试这个
var routes = (
<Route handler={App}>
</Route>
);
Router.run(routes,(Root) => {
React.render(<Root/>, document.body);
});
答案 2 :(得分:1)
我仍然围绕反应路由器,但我要检查的第一件事是您正在使用的版本以及您引用的文档。我能够通过以下方式让它工作......
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')
)
});
};
基本上是PhInside所说的,但包含在window.onload
中答案 3 :(得分:0)
在<Route>
中尝试<Router>
而不是React.render()
。