Estoy tratando de descubrir cómo anidar correctamente las rutas dentro de la página de inicio. Aquí está mi enrutador:

var appRouter = (
  <Router history={ hashHistory }>
    <Route path="/" component={ Navbar }>
      <IndexRoute component={ Homepage }/>
      <Route path="items" component={ Homepage }>
        <Route path=":item" component={ ItemShow }/>
      </Route>
      <Route path="nothome" component={ NotHome }/>
    </Route>
  </Router>
)

Tener un IndexRoute y una Ruta que apuntan a la Página de inicio no parece óptimo, pero me da el comportamiento que estoy buscando. Aquí está todo mi proyecto (escribí esto solo para ilustrar este punto).

//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(
      <div>
        <Link to="/"><h1>Navbar</h1></Link>
        {this.props.children}
      </div>
    )
  }
})

var Homepage = React.createClass({
  render(){
    return(
      <div>
        <h2>This is the homepage</h2>
        <ItemList/>
        <Link to="/nothome">Another page</Link>
        {this.props.children}
      </div>
    )
  }
})

var ItemList = React.createClass({
  render(){
    return(
      <ul>
        {items.map( item => {
          return <Item key={item} id={item}></Item>
        })}
      </ul>
    )
  }
})

var Item = React.createClass({
  handleClick(){
    hashHistory.push("items/" + this.props.id)
  },
  render(){
    return(
      <li onClick={this.handleClick}>Item {this.props.id}</li>
    )
  }
})

var ItemShow = React.createClass({
  render(){
    return(
      <div>
        You clicked on item {this.props.params.item}
      </div>
    )
  }
})

var NotHome = React.createClass({
  render(){
    return(
      <h2>This is not the homepage</h2>
    )
  }
})

var appRouter = (
  <Router history={ hashHistory }>
    <Route path="/" component={ Navbar }>
      <IndexRoute component={ Homepage }/>
      <Route path="items" component={ Homepage }>
        <Route path=":item" component={ ItemShow }/>
      </Route>
      <Route path="nothome" component={ NotHome }/>
    </Route>
  </Router>
)

document.addEventListener("DOMContentLoaded", ()=>{
  ReactDOM.render(appRouter, document.getElementById("root"))
})

Otra opción sería colocar un componente de página de inicio en la parte superior de mi componente ItemShow y no anidar las rutas, pero eso parece igual de malo, si no peor.

Parece que debe haber una forma preferible de obtener este comportamiento. ¿Qué es?