react-router Uncaught TypeError：无法读取未定义的属性“toUpperCase”

IT技术 javascript reactjs react-router
2021-05-07 15:14:13

我正在尝试使用 react-router 但是当我写一个简单的路由不起作用并且控制台显示 Uncaught TypeError: Cannot read property 'toUpperCase' of undefined。

否则，当我在没有运行良好的react-router的情况下使用时

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

错误来自react库的这一行

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

您正在使用 1.0 Beta 文档中的示例，但您可能正在运行最新的稳定版本 (0.13)。master 中的文档来自 1.0 Beta，这是混淆的根源。

阅读最新稳定版本的文档：https : //github.com/ReactTraining/react-router/tree/master/docs

我的猜测是当 React.render 执行时，Router 还不存在。试试这个

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

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

我仍然在思考 react-router，但我首先要检查的是您使用的版本和您引用的文档。我能够通过执行以下操作来让它工作......

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 中

尝试<Route>而不是<Router>in React.render()。

其它你可能感兴趣的问题
上一篇RAMPS 板上的 4 针风扇 - 直接？ 下一篇温度波动，正常吗？