CODEWITHSUNDEEP
javascriptreactjs
Ryan McClure
Ryan McClure

Reputation: 1223

React-Router RouteHandler Undefined

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?

Upvotes: 5

Views: 3858

Answers (1)

Sachin Gadagi
Sachin Gadagi

Reputation: 749

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

Upvotes: 14

Related Questions