CODEWITHSUNDEEP
reactjsreact-router
cucucool
cucucool

Reputation: 3877

Uncaught Invariant Violation: ReactDOM.render(): Invalid component element

I am trying to implement a navigation example using react router and stuck in an error. Please find the code 

    app.js
    -------

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Routes from './routes';

    ReactDOM.render(Routes, document.getElementById('react-container'));

    routes.js
    ---------

    import { React,Component } from 'react';
    import { DefaultRoute, Link, Route, RouteHandler,Router } from 'react-router';
    import Page1 from './page1';
    import Home from './home';

    export default class Routes extends Component {

        constructor() {
        super();
      } 

      render() {
        return (
                <Router >
                    <Route path="/" component={Home}>
                        <Route name="page1" path="/1" component={ Page1 }/>
                    </Route>
                </Router>
        );
      }
    }

    home.js
    -------

    import React, { Component } from 'react';

    export default class Home extends Component {

        constructor() {
        super();
      } 

      render() {
        return (
            <div>
              <Header />
              {this.props.children}
          </div>
        );
      }
    }

    page1.js
    --------

    import React, { Component } from 'react';

    export default class Page1 extends Component {

        constructor() {
        super();
      } 

      render() {
        return (
            <div>
              <h1> Page 1 </h1>
          </div>
        );
      }
    }

I have babel transformer to convert from es6 to es5 and I get the following error on loading the app,

    Uncaught Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

Can anyone help me in troubleshooting this issue ?

Upvotes: 3

Views: 5426

Answers (1)

azium
azium

Reputation: 20614

The problem is in your routes.js. You are wrapping your routes inside of a component, then passing that to ReactDOM.render. You should be passing the jsx directly. My suggestions would be to unwrap routes from your class, and just export the jsx.

routes.js
---------

import React from 'react'
import { Router, Route } from 'react-router'
import Page1 from './page1'
import Home from './home'

let routes = 
  <Router>
    <Route path="/" component={Home}>
      <Route name="page1" path="/1" component={Page1}/>
    </Route>
  </Router>

export default routes

The error is complaining that you are passing a class, rather then calling React.createElement. Remember that this:

let someElement = <div>Hello</div>

Will turn into this:

var someElement = React.createElement(
  "div",
  null,
  "Hello"
)

Upvotes: 4

Related Questions