Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined

Question

I am getting this error :-
Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined
in this code. I used Router for navigation but not working. I imported a file called Home.jsx

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

    var App = React.createClass({
      render() {
        return (
          <div>
            <p>App</p>
            <ul>
              <li>About</li>
            </ul>
          </div>
        )
      }
    })

var About = require('./components/Home')

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute path="/about" component={About} />
    </Route>
  </Router>
), document.body)

and Home.jsx

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

score 5 · Accepted Answer · answered Dec 07 '15 at 15:26

There are a few things which you are doing wrong here. I'm assuming you are using React Router 1.0 (because of use of IndexRoute).

In version 1.0 Router component is a property of the top-level module, so this is how you would do your imports:

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

I think you also not fully understand what IndexRoute is, have a look in the docs for the clarification. But the tldr; is that the IndexRoute does not take the path argument.

Another thing is that to mount your routes components somewhere you need to specify where, and you can do it with use of {this.props.children}. So your could could look like:

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

var App = React.createClass({
  render() {
    return (
      <div>
        <p>App</p>
        {this.props.children}
      </div>
    )
  }
})

var About = require('./components/Home')

ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={About} />
    </Route>
  </Router>
), document.body)

Please have a look at the Introduction docs so you will better understand how to use react router in your app.

Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined

1 Answers1

Linked