I have a repo at

I have the homepage showing links, and when you click the links react-router works. But the text of the ponent 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 './ponents/Home';
import Login from './ponents/Login';
import SignupMain from './ponents/SignupMain';


const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
    (
      <Provider store={createStoreWithMiddleware(reducers)}>
          <Router history={browserHistory}>
              <Route path="/" ponent={Nav}>
                  <IndexRoute ponent={Home}/>
                  <Route path='/login' ponent={Login}/>
                  <Route path='/signup-main' ponent={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;

ponents/Home.js:

import React, { Component } from 'react';

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

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

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

I have the homepage showing links, and when you click the links react-router works. But the text of the ponent 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 './ponents/Home';
import Login from './ponents/Login';
import SignupMain from './ponents/SignupMain';


const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
    (
      <Provider store={createStoreWithMiddleware(reducers)}>
          <Router history={browserHistory}>
              <Route path="/" ponent={Nav}>
                  <IndexRoute ponent={Home}/>
                  <Route path='/login' ponent={Login}/>
                  <Route path='/signup-main' ponent={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;

ponents/Home.js:

import React, { Component } from 'react';

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

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

• javascript
• reactjs
• react-router

• 1 what is your react router version? Your code is not accessible. Put it into some public repo like github and share it. – Ravindra Ranwala Commented May 21, 2017 at 2:12

1 Answer 1

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

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>
        )
    }
}