<Layout> ... </Layout>

<Router history...
 <Route path...

import React from 'react';
import {Link} from 'react-router'
import {Navbar, NavItem} from 'react-materialize';

export default React.createClass({
 render(){
return (
<div>
<Navbar brand='logo' right>
  <NavItem><Link to="/Home" activeClassName="active">Home</Link></NavItem>
  <NavItem><Link to="/Sign-In" activeClassName="active">Sign In</Link></NavItem>
  <NavItem><Link to="/Register" activeClassName="active">Register</Link></NavItem>
</Navbar>
{this.props.children}
</div>
)
}
})

import React, {Component} from 'react';
import {Link} from 'react-router'
import {Footer} from 'react-materialize';
import '../../resource/template.css'


class RT_Footer extends Component{
  render(){
return (
<div>
{this.props.children}
  <Footer copyrights="&copy; 2015 Copyright Text"
  moreLinks={
    <Link className="grey-text text-lighten-4 right" href="#!">More Links</Link>
  }
  links={
    <ul>
      <li><Link to="/About Us" className="grey-text text-lighten-3">About Us</Link></li>
      <li><Link to="/Terms & Conditions" className="grey-text text-lighten-3">Terms & Conditions</Link></li>
      <li><Link to="/Help" className="grey-text text-lighten-3">Help</Link></li>
      <li><Link to="/Contact Us" className="grey-text text-lighten-3">Contact Us</Link></li>
    </ul>
  }
  className='example'
  >
    <h5 className="white-text">Footer Content</h5>
    <p className="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
  </Footer>

</div>
);
 }
}
export default RT_Footer;

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

class Layout extends Component {
  render(){
return (
  <div>
  <span>
    <Router history={browserHistory}>
      <Route path="/" component={Header}>
       <Route path="/Home" component={Home}/>
       <Route path="/Sign-In" component={SignIn}/>
       <Route path="/Register" component={Register}/>
      </Route>
    </Router>
  </span>
  <span>
    <Router history={browserHistory}>
      <Route path="/" component={RT_Footer}>
       <Route path="/About Us" component={About}/>
       <Route path="/Terms & Conditions" component={TC}/>
       <Route path="/Register" component={Register}/>
      </Route>
    </Router>
  </span>
  </div>
);
 }
}
export default Layout;

import {Router, Route, browserHistory} from 'react-router'
import Layout from './components/Layout'
// Import here all the required components used by the router such as SignIn, Register, ...

render(
    <Layout>
        <Router history={browserHistory}>
            <Route path="/" component={RT_Footer}>
            <Route path="/About Us" component={About}/>
            <Route path="/Terms & Conditions" component={TC}/>
            <Route path="/Register" component={Register}/>
           // Add as many Route components as needed
        </Router>
    </Layout>,
    document.getElementById('react-anchor')

import Header from './Header'
import Footer from './Footer'
import React, {Component} from 'react'

class Layout extends Component {
    render() {
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        )
    }
}