React-router: Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined

[dlwalsh]

I get the following error using v1.0.0-beta4: Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined.

I also get this warning: Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

I don't know what either message means. I've spent hours on this but for the life of me I can't figure out what I'm doing wrong. The source code is below.

import React from 'react';
import { Router, Route, DefaultRoute } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

import App from './components/App';
import About from './components/pages/About';
import Contact from './components/pages/Contact';
import Home from './components/pages/Home';
import CaseStudy from './components/pages/CaseStudy';
import Work from './components/pages/Work';

const mount = document.getElementById('application');

React.render(<Router history={createBrowserHistory()}>
    <Route component={App}>
        <DefaultRoute component={Home} />
        <Route path="about" component={About} />
        <Route path="contact" component={Contact} />
        <Route path="work" component={Work} />
        <Route path="work/:id" component={CaseStudy} />
    </Route>
</Router>, mount);

[dlwalsh]

Finally solved. Just had to replace

<DefaultRoute component={Home} />

with:

<Route path="/" component={Home} />

[marnusw]

You can also use

<IndexRoute component={Home} />

See the IndexRoute docs for the motivation.

[jwright04]

Hey All,

I know this issue is closed, but this is the closest i've found to the issue i'm running into. Uncaught TypeError: Cannot read property 'createRouteFromReactElement' of undefined. I followed what @dlwalsh suggested and changed my Router to:

React.render(
    <Router history={ createBrowserHistory() }>
        <Route component={ Main }>
            <Route path="/" component={ Landing } />
        </Route>
    </Router>, document.getElementById('content')
);

but still getting the error. I'm using "react-router": "^1.0.0". Any ideas on this?

[taion]

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Would you like to post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router.

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

[jwright04]

Thanks for the info, will do.

[Pomax]

@jwright04 if you asked this on SO, do you have a link to the question? Because this issue is the top hit on google for "TypeError: Cannot read property 'createRouteFromReactElement' of undefined" still, and being able to follow the link trail to a solution is infinitely better than mining google results =)

[ryanflorence]

probably have your imports wrong

[reduxdj]

• 1... can't figure this out: on After Action
  warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).warning @ warning.js:45ReactElementValidator.createElement @ ReactElementValidator.js:221(anonymous function) @ parooz.cjsx:169runStartupCallbacks @ startup_client.js:30ready @ startup_client.js:32
  warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

[seanbrookes]

changing the import syntax worked for me
not working:

import ReactRouter from 'react-router';
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;

works:

import ReactRouter from 'react-router';
import { Router } from 'react-router';
import { Route } from 'react-router';
import { Link } from 'react-router';

[iamrandys]

I had the same issue. Ryan was right, I had my imports wrong.

This may help anyone that hasn't upgraded to es6:

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

[Pomax]

@seanbrookes if you're using ES6 imports, you can simply use

import { Router, Route, Link } from 'react-router';

Because you don't need the ReactRouter base for anything, and ES6 supports destructuring assignment.

[IanMartinGroup]

I know this is closed, have the exact same issue, but it isn't the path that's the problem. Can I see an example of how one of your components are structured? @dlwalsh