Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 420
Ryan McClure Avatar asked Apr 10 '16 16:04

Ryan McClure


1 Answers

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

like image 130
Sachin Gadagi Avatar answered Oct 25 '22 08:10

Sachin Gadagi