React components not appearing

Question

I have a repo at https://bitbucket.org/codyc54321/anthony-project-react

I have the homepage showing links, and when you click the links react-router works. But the text of the component is not showing up, like <div>Login page</div>, <div>Homepage</div>, etc.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import reducers from './reducers';

import Nav from './Nav';
import Home from './components/Home';
import Login from './components/Login';
import SignupMain from './components/SignupMain';


const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
    (
      <Provider store={createStoreWithMiddleware(reducers)}>
          <Router history={browserHistory}>
              <Route path="/" component={Nav}>
                  <IndexRoute component={Home}/>
                  <Route path='/login' component={Login}/>
                  <Route path='/signup-main' component={SignupMain}/>
              </Route>
          </Router>
      </Provider>
  ), document.querySelector('.container'));

Nav.js:

import React from 'react';
import { Link } from 'react-router';

export default class Nav extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header navbar-brand">
                            <a href="/">Home</a>
                        </div>
                    </div>
                    <div id="navbar" className="navbar-right">
                        <ul className="nav navbar-nav">
                            <li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li>
                            <li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li>
                            <li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li>
                        </ul>
                    </div>
                </nav>
            </div>
        )
    }
}


// export Nav as default;

components/Home.js:

import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return (
      <div>Homepage</div>
    );
  }
}

Why aren't these components showing up on the page?

Solution

Since your other routes are nested inside the route for 'Nav' component, it should render its children somewhere. For that, you have to put this.props.children where you want to render nested components in JSX of Nav component.

export default class Nav extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header navbar-brand">
                            <a href="/">Home</a>
                        </div>
                    </div>
                    <div id="navbar" className="navbar-right">
                        <ul className="nav navbar-nav">
                            <li><Link activeClassName="active" to="/" onlyActiveOnIndex>Home</Link></li>
                            <li><Link activeClassName="active" to="/login" onlyActiveOnIndex>Login</Link></li>
                            <li><Link activeClassName="active" to="/signup-main" onlyActiveOnIndex>Signup</Link></li>
                        </ul>
                    </div>
                </nav>
               <div>{this.props.children}</div> 
            </div>
        )
    }
}

Comments

[Ravindra Ranwala]

what is your react router version? Your code is not accessible. Put it into some public repo like github and share it.

[codyc4321]

correct, I do see that clause now in the bottom of our Nav component at work, but didn't know what it meant. Thanks tharaka