title: How to nest React Routes in homepage
body: <p>I'm trying to figure out how to properly nest routes inside the homepage. Here's my Router:</p>
  
  <pre><code>var appRouter = (
    &lt;Router history={ hashHistory }&gt;
      &lt;Route path="/" component={ Navbar }&gt;
        &lt;IndexRoute component={ Homepage }/&gt;
        &lt;Route path="items" component={ Homepage }&gt;
          &lt;Route path=":item" component={ ItemShow }/&gt;
        &lt;/Route&gt;
        &lt;Route path="nothome" component={ NotHome }/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  )
  </code></pre>
  
  <p>Having an IndexRoute and Route that both point to Homepage doesn't seem optimal, but it gives me the behavior I'm looking for. Here's my whole project (I wrote this just to illustrate this point).</p>
  
  <pre><code>//React
  var React = require("react");
  var ReactDOM = require("react-dom");
  //Router
  var ReactRouter = require('react-router')
  var Router = ReactRouter.Router
  var Route = ReactRouter.Route
  var IndexRoute = ReactRouter.IndexRoute
  var hashHistory = ReactRouter.hashHistory
  var Link = ReactRouter.Link
  
  var items = [1, 2]
  
  var Navbar = React.createClass({
    render(){
      return(
        &lt;div&gt;
          &lt;Link to="/"&gt;&lt;h1&gt;Navbar&lt;/h1&gt;&lt;/Link&gt;
          {this.props.children}
        &lt;/div&gt;
      )
    }
  })
  
  var Homepage = React.createClass({
    render(){
      return(
        &lt;div&gt;
          &lt;h2&gt;This is the homepage&lt;/h2&gt;
          &lt;ItemList/&gt;
          &lt;Link to="/nothome"&gt;Another page&lt;/Link&gt;
          {this.props.children}
        &lt;/div&gt;
      )
    }
  })
  
  var ItemList = React.createClass({
    render(){
      return(
        &lt;ul&gt;
          {items.map( item =&gt; {
            return &lt;Item key={item} id={item}&gt;&lt;/Item&gt;
          })}
        &lt;/ul&gt;
      )
    }
  })
  
  var Item = React.createClass({
    handleClick(){
      hashHistory.push("items/" + this.props.id)
    },
    render(){
      return(
        &lt;li onClick={this.handleClick}&gt;Item {this.props.id}&lt;/li&gt;
      )
    }
  })
  
  var ItemShow = React.createClass({
    render(){
      return(
        &lt;div&gt;
          You clicked on item {this.props.params.item}
        &lt;/div&gt;
      )
    }
  })
  
  var NotHome = React.createClass({
    render(){
      return(
        &lt;h2&gt;This is not the homepage&lt;/h2&gt;
      )
    }
  })
  
  var appRouter = (
    &lt;Router history={ hashHistory }&gt;
      &lt;Route path="/" component={ Navbar }&gt;
        &lt;IndexRoute component={ Homepage }/&gt;
        &lt;Route path="items" component={ Homepage }&gt;
          &lt;Route path=":item" component={ ItemShow }/&gt;
        &lt;/Route&gt;
        &lt;Route path="nothome" component={ NotHome }/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  )
  
  document.addEventListener("DOMContentLoaded", ()=&gt;{
    ReactDOM.render(appRouter, document.getElementById("root"))
  })
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/VWIqA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VWIqA.png" alt="React Routes Nested In Homepage"></a></p>
  
  <p>Another option would be to put a Homepage component at the top of my ItemShow component and not nest the routes, but that seems just as bad if not worse.</p>
  
  <p>It seems like there must be a preferable way to get this behavior. What is it?</p>