Getting Invariant违规:使用createBrowserHistory时元素类型无效react-route

Getting Invariant Violation : Element type is invalid while using createBrowserHistory with react-router@1.0.0

本文关键字：元素 类型 无效 react-route createBrowserHistory Invariant 违规 使用 Getting      更新时间：2023-09-26

我可以使用React创建一个单页应用程序。在这里，当使用React路由器时，我无法找到使用历史的正确方式。我尝试了以下使用方法：

var React = require('react');
var ReactRouter = require('react-router');
var createBrowHistory = require('history/lib/createBrowserHistory');
var Router = ReactRouter.Router;
var Route =  ReactRouter.Route;
var Content = require('./default-content');
module.exports = (
   <Router history={createBrowHistory()}>
      <Route path="/" component={Content}>
      </Route>
   </Router>
)

然而，我得到了以下错误：

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

注意：我使用的是gullow、browserfy、，React@0.14.3反应roter@1.0.0，history@1.13.1请帮我克服以上错误。谢谢

我不知道你发布的代码的确切内容，但我猜测一下，如果你把代码改成这样：

var MyRouter = React.createClass({
  render: function() {
    return (<Router history={createBrowHistory()}>
       <Route path="/" component={Content}>
       </Route>
    </Router>);
  }
});
module.exports = MyRouter

这会奏效的。

我猜您需要将代码放在另一个位置，并将其放入React.createElement函数中。问题是，您不是在导出React类，而是在导出ReactElement。这是从您的代码生成的Javascript：

module.exports = (React.createElement(Router, {history: createBrowHistory()}, 
   React.createElement(Route, {path: "/", component: Content}
)));

如果你发布其他文件，我可以更好地解释：default-content.js和main.js

相关文章：