React-router: type.toUpperCase 不是一个函数

React-router: type.toUpperCase is not a function

本文关键字：一个 函数 type toUpperCase React-router      更新时间：2023-09-26

当我第一次使用 react-router 时，但页面在下面给了我这个错误

React-router： type.toUpperCase 不是一个函数 

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

从文件中似乎没有错，有人可以帮助我吗？

错误出现在哪里

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

您发布的错误很神秘，但它的意思是您正在尝试从不是真实组件的变量中渲染组件。例如，您可以执行此操作并得到相同类型的错误：

render: function() {
  var Thing = {};  // not a component
  return <Thing />;  // same error
}

在您发布的代码中，<Router>映射到一个变量，该变量是模块，而不是组件。您可以使用新的变量声明来修复它：

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

我遇到了同样的错误。然后我发现我在导出组件时出错了。在一个组件中，我编写了module.export而不是module.exports。因此，请检查您是否犯了同样的错误。

更改require语句： 

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

如果你使用 react-router v0.13.3替换路线上的路线r，喜欢这个：

var routes = (
  <Route>
    <Route path="/" component={App} />
  </Route>
);
Router.run(routes, function(Root) {
 React.render(<Root />, document.getElementById('app'));
});

我有同样的错误，它是圆依赖。

组件1.jsx ：

var Component1 = require('./component2.jsx');

组件2.jsx ：

var Component2 = require('./component1.jsx');

这样看，这是显而易见的，但错误消息非常不透明。

相关文章：