CODEWITHSUNDEEP
reactjsreact-routerchildren
akantoword
akantoword

Reputation: 3064

react router not rendering child component

I'm learning react router and just cut off part of the Github's page and I'm using webpack and http-server to host my dev environement at http://localhost:8080. When I go to to the routh path, I see my App component, but I don't see the Users component when I go to http://localhost:8080/users.

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var browserHistory = require('react-router').browserHistory;

var App = React.createClass({
  render: function () {
    return <div>app</div>
  }
});
// etc.

var Users = React.createClass({
  render: function () {
    return (
      <div>users</div>
    )
  }
})



document.addEventListener("DOMContentLoaded", function () {

  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="users" component={Users}>
        </Route>
      </Route>
    </Router>
  ), document.getElementById('main'));
});

//index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="main">

    </div>
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

Upvotes: 1

Views: 3882

Answers (2)

fodma1
fodma1

Reputation: 3535

Try this then:

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

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

var App = React.createClass({
  render() {
    return <div>
             <ul>
               <li><Link to="/users">/users</Link></li>
             </ul>
             <div>app</div>
             <div>{this.props.children}</div>
           </div>
  }
})

var Users = React.createClass({
  render() {
    return (
      <div>users</div>
    )
  }
})

document.addEventListener("DOMContentLoaded", function () {

  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="users" component={Users}>
        </Route>
      </Route>
    </Router>
  ), document.getElementById('main'));
});

What changed:

  • I added <div>{this.props.children}</div> where the child (in this case the Users) components get rendered
  • I added <Link to="/users">/users</Link>.

Now if you click the link, it works like a charm!

Please note, that if you are using the webpack dev server, the browser URL is not gonna be the same as the URL that you are actually on. ) I had this issue, though you might have the same struggle). So instead of http://localhost:8000/webpack-dev-server/ open up http://localhost:8000/ (which redirects to http://localhost:8000/#/?_k=some_weird_hash) and http://localhost:8000/#/users gonna work.

Upvotes: 0

fodma1
fodma1

Reputation: 3535

I had exactly the same problem. So the thing is, users is a child of app. So whenever you render /users, first it renders app. But inside the app definition, you have to specify where you want to render its children with: {this.props.children}. So either add it to the definition:

var App = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>
  }
});
// etc.

Or bring users to the same level as app (I guess you don't want to do this):

document.addEventListener("DOMContentLoaded", function () {

  ReactDOM.render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
      </Route>
      <Route path="/users" component={Users}>
      </Route>
    </Router>
  ), document.getElementById('main'));
});

For reference: https://github.com/reactjs/react-router#whats-it-look-like

Upvotes: 1

Related Questions