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?