CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-router
bounty
bounty

Reputation: 409

React Router rendering empty div

The app div is empty. The only thing inside it is a noscript tag.

var React = require('react');
var ReactDOM = require('react-dom');
var reactRouter = require('react-router');

var Router = reactRouter.Router;
var DefaultRoute = reactRouter.DefaultRoute;
var Route = reactRouter.Route; 
var RouteHandler = reactRouter.RouteHandler;
var Link = reactRouter.Link;

var LoginHandler = require('./components/LoginHandler.jsx');

var AppComponent = React.createClass({
    render: function() {
        return(
            <nav>
            <Link to="/">Home</Link>
            <Link to="login">Login</Link>
            <RouteHandler/>
            </nav>
        )
    }
});

var routes = (  
    <Route name="app" path="/" handler={AppComponent}></Route>
)

ReactDOM.render(<Router routes={routes}/>, document.getElementById('app'));`

Upvotes: 2

Views: 1557

Answers (1)

Harshit Pant
Harshit Pant

Reputation: 498

Try replacing handler with component in the Route tag:

var React = require('react');
var ReactDOM = require('react-dom');
var reactRouter = require('react-router');

var Router = reactRouter.Router;
var DefaultRoute = reactRouter.DefaultRoute;
var Route = reactRouter.Route; 
var RouteHandler = reactRouter.RouteHandler;
var Link = reactRouter.Link;

var LoginHandler = require('./components/LoginHandler.jsx');

var AppComponent = React.createClass({
    render: function() {
        return(
            <nav>
            <Link to="/">Home</Link>
            <Link to="login">Login</Link>
            <RouteHandler/>
            </nav>
        )
    }
});

var routes = (  
    <Route name="app" path="/" component={AppComponent}></Route>
)

ReactDOM.render(<Router routes={routes}/>, document.getElementById('app'));

Upvotes: 3

Related Questions