React create element type invalid after including router

Question

When I have added react router it gives me follow errors

here is main.js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router');
var Route = require('react-router').Route;
var Home = require("./components/homePage");
ReactDOM.render(
    <Router >
        <Route component={Home} path="/"></Route>
    </Router>
    , document.getElementById('app'));

Homepage.js

var React = require('react');
var Home = React.createClass({
    render: function(){
        return (
            <div >
                <h1>Home</h1>
            </div>
        );
    }
});

module.exports = Home;

There are many others questions related to same problem but none of them address the real issue or general reason or cause. other answers suggesting using react-router 4 alpha and i have tried beta4 but still same error

Possible duplicate of React.createElement: type is invalid -- expected a string, but got: object — prosti
– prosti, Commented Feb 3, 2017 at 15:40
according to mentioned question installed beta-4 but still not working — owais
– owais, Commented Feb 3, 2017 at 17:20
What do you have in package.json file when in question is react-router? — prosti
– prosti, Commented Feb 3, 2017 at 17:23

rgommezz · Accepted Answer · 2017-02-03 15:41:01Z

3

You are importing React Router components wrongly, it should be:

var Router = require('react-router').Router

var Route = require('react-router').Route

answered Feb 3, 2017 at 15:41

rgommezz

14k2 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

owais Over a year ago

after trying import { Router, Route } from 'react-router' the app worked so i came to know your syntax was right. As the first time i have tried i changed only in one file and the error was triggering from multiple file but I was unable to find due to bundle.js giving no hint from which file error happened.

Community · Accepted Answer · 2017-05-23 12:25:54Z

1

There was a similar question like yours, but tricky you cannot say it is a duplicate, at least the error is the same.

Based on the ES5 syntax you are using I guess your example is old. Try using the different version of the React Router.

Or just start with some new ES6 syntax React Router example.

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Feb 3, 2017 at 15:38

prosti

46.9k19 gold badges199 silver badges161 bronze badges

1 Comment

owais Over a year ago

according to mentioned question installed beta-4 but still not working. there is no syntax error

Collectives™ on Stack Overflow

React create element type invalid after including router

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related