React-Router RouteHandler Undefined

Question

I'm having trouble getting RouteHandler to import correctly. This is my code:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactRouter = require('react-router');
var ActivityView = require('./ActivityView');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var RouteHandler = ReactRouter.RouteHandler;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;

var App = React.createClass({
    render: function() {
        return (
            <div>
                <div className="navbar navbar-default">
                    <ul className="nav navbar-nav navbar-right">
                        <li><Link to="app">Dashboard</Link></li>
                    </ul>
                </div>

                <RouteHandler />
            </div>
        );  
    }   
});

ReactDOM.render(
    <Router history={hashHistory}>
        <Route name="app" path="/" component={App}>
            <IndexRoute component={ActivityView} />
        </Route>
    </Router>,
    document.getElementById('content')
);

I keep getting the error:

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). Check the render method of App.

If I remove <RouteHandler /> this warning goes away and the navbar renders. Am I importing RouteHandler incorrectly here?

Even I was searching for the same solution, stumbled upon this : github.com/reactjs/react-router/blob/master/upgrade-guides/… — Sachin Gadagi

Sachin Gadagi Sachin Gadagi · Accepted Answer · 2016-04-10T17:29:03

According to the section in upgrading guide

RouteHandler is gone. Router now automatically populates this.props.children of your components based on the active route.

// v0.13.x
<RouteHandler/>

// v1.0
{this.props.children}

As with all other React components that receive children from their parent, you can use the standard React.cloneElement pattern to inject additional props into your supplied child.

You should generally avoid over-using this pattern, as this tightly couples your route components via the render tree rather than the routing tree, which can make refactoring more difficult.

Link to complete Documentation

React-Router RouteHandler Undefined

1 Answers