[英]Getting Invariant Violation : Element type is invalid while using createBrowserHistory with react-router@1.0.0
I get to create a Single Page Application using React. 我使用React创建一个单页应用程序。 Here, while using React-router, I am not able to find the correct way of using history. 在这里,在使用React-router时,我无法找到使用历史记录的正确方法。 I have tried the below way of using it: 我尝试了以下使用方式:
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>
)
However, I am getting the following error: 但是,我收到以下错误:
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.
Note : I am using gulp, browserify, React@0.14.3, React roter@1.0.0, history@1.13.1 Please help me through the above errors. 注意:我正在使用gulp,browserify,React @ 0.14.3,React roter @ 1.0.0,history @ 1.13.1,请帮我解决以上错误。 Thanks. 谢谢。
I don't know exactly the code around the one you posted, but making some guesses, I would say that if you change your code to this: 我不完全了解您所发布的代码,但是有些猜测,我想说的是,如果您将代码更改为此:
var MyRouter = React.createClass({
render: function() {
return (<Router history={createBrowHistory()}>
<Route path="/" component={Content}>
</Route>
</Router>);
}
});
module.exports = MyRouter
That would work. 那行得通。
I'm guessing you're requiring your code in another place and putting it inside a React.createElement
function. 我猜你在另一个地方需要代码,并将其放入React.createElement
函数中。 The problem is that you are not exporting a React Class, you are exporting a React Element. 问题是您不导出React类,而是导出React元素。 This is the Javascript generated from your code: 这是从您的代码生成的Javascript:
module.exports = (React.createElement(Router, {history: createBrowHistory()},
React.createElement(Route, {path: "/", component: Content}
)));
I can explain better if you post your other files: default-content.js and main.js 如果您发布其他文件,我可以更好地解释: default-content.js和main.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.