javascript - React-Router 1.0.0 Uncaught Error: Invariant Violation: Element type is invalid - Stack Overflow

admin管理员组

文章数量:1390334

I am getting following error while using react-router :-

Can anyone tell me where i am wrong?

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object.

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


var App = React.createClass({
  render: function(){
    return (
  <div>
  <h1>Wele</h1>
    {this.props.children}
  </div>
);
}
});

var Login = React.createClass({
  render: function(){
    return (    
      <div className="large-3 medium-6 large-centered medium-centered columns"> 
        <h1>Login Page</h1>
      </div>

  ) }
});

ReactDOM.render((
  <Router>
    <Route path="/" ponent={App}>
      <Route path="login" ponent={Login}/>      
    </Route>
  </Router>
   ), document.getElementById('content'));

I am getting following error while using react-router :-

Can anyone tell me where i am wrong?

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object.

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


var App = React.createClass({
  render: function(){
    return (
  <div>
  <h1>Wele</h1>
    {this.props.children}
  </div>
);
}
});

var Login = React.createClass({
  render: function(){
    return (    
      <div className="large-3 medium-6 large-centered medium-centered columns"> 
        <h1>Login Page</h1>
      </div>

  ) }
});

ReactDOM.render((
  <Router>
    <Route path="/" ponent={App}>
      <Route path="login" ponent={Login}/>      
    </Route>
  </Router>
   ), document.getElementById('content'));

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Oct 30, 2015 at 7:38 Kunal asked Oct 30, 2015 at 7:31 KunalKunal 90711 gold badge88 silver badges1515 bronze badges 3

• How does your Login ponent look like? – Tahir Ahmed Commented Oct 30, 2015 at 7:33
• Updated login ponent – Kunal Commented Oct 30, 2015 at 7:38
• It could be that you are missing module.exports = Login; and module.exports = App; lines. I could be wrong though. – Tahir Ahmed Commented Oct 30, 2015 at 7:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Following lines resolved my error

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

First of all, sorry for my bad english. I had the same problem and after a few hours, was how a fix that:

1 - You should import the correct modules like Saroj said:

var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;

2 - After that, you'll probably have problems with url like "localhost:3000/#/?_k=ckuvup". So, do this:

npm install history --save

...then

var createBrowserHistory = require('history/lib/createBrowserHistory');

and change your Router config for this:

ReactDOM.render((
  <Router history={createBrowserHistory()}>
    <Route path="/" ponent={App}>
      <Route path="login" ponent={Login}/>      
    </Route>
  </Router>
), document.getElementById('content'));

...and Read HERE to understand why do it this way

After do all these things, maybe you get some trouble when you are serving this with gulp server for example. I remend taking a look here.

Router is a named export in the 1.0.0 API:

var {Router, Route} = require('react-router')

本文标签： javascriptReactRouter 100 Uncaught Error Invariant Violation Element type is invalidStack Overflow