Understanding how to have multiple pages with React and react-router

Question

Very new to react, trying to go through multiple tutorials in this process.

I believe I am missing one of the core concepts of React and am setting up my structure incorrectly. What I am trying to do is have a home page (Main_Layout) with a navigational bar at the top. It will have a link in that page to go to a secondary page to display user information (User_Layout). That User_Layout page will also have a navigational bar, but it will be a different one than the home pages.

So I have set my routing to contain just a single extra route for the user page: client.js

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

 const app = document.getElementById('app');

 ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main_Layout}>
            <Route path="user" component={User_Layout}></Route>
        </Route>
    </Router>,
 app);
});

So when the app loads it will load Main_Layout.js

import React from "react";
import Header from "./components/Header"

export default class Main_Layout extends React.Component {
  constructor(){
    super();
    this.state = {
        "title" : "Go to user page!",
    }
  }

  render(){
    return (
        <div>
            <Header title={this.state.title}/>
        </div>
    )
  }
}

here is my Header.js component which just has a link to the /user route:

import React from 'react';
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
import { Route, RouteHandler, Link } from 'react-router';
import { LinkContainer } from 'react-router-bootstrap';

export default class Header extends React.Component {
  render(){
    return(
         <Navbar>
            <Navbar.Header>
              <Navbar.Brand>
                <a href="#">Website Title</a>
              </Navbar.Brand>
            </Navbar.Header>
            <Nav pullRight>
              <LinkContainer to="/user">
                <NavItem eventKey={1}>{this.props.title}</NavItem>
              </LinkContainer>
            </Nav>
          </Navbar>
    )
  }
}

and finally my page to display user information : User_Layout.js

 import React from "react";

 import Footer from "./components/Footer"
 import Header from "./components/Header"

 export default class User_Layout extends React.Component {
   render(){
    console.log("Made it to the user page");
    var title = "You are at the user page!";
    return (
        <div>
            <Header title={title}/>
        </div>
    )
   } 
 }

I guess I have a few problems:

1. When I click "Go to your user page" I see the route change in the URL bar to /#/user, but my code in User_Layout never fires (the console.log doesnt trigger)

2. If I was to override the existing header, is it right for me to re declare the header component in User_Layout? What is the best way to change a navbar element?

Answer 1

you should keep both of these routes parallel to each other if you are not using the parent component Main_layout as a frame to your child component User_Layout as you are using different headers. eg

 ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main_Layout}/>
        <Route path="user" component={User_Layout}/>
    </Router>,
 app);
});

also if you want the parent child relation you can pass new props to the header component by wiring up a function from the main component which handles all the props to pass to the header when the route changes.

The key concept that you are missing in react is not using this.props.children inside the main_layout to be able to render child routes inside it. Your main_layout should look like

    import React from "react";
    import Header from "./components/Header"

    export default class Main_Layout extends React.Component {
      constructor(){
        super();
        this.state = {
            "title" : "Go to user page!",
        }
      }

      render(){
        return (
            <div>
                <Header title={this.state.title}/>
               {this.props.children}
            </div>
        )
      }

}

only after using this.props.children you will be able to render components in the nested routes.

Answer 2

Change the path from "user" to "/user".

<Route path="user" component={User_Layout}></Route>

should be

<Route path="/user" component={User_Layout}></Route>