如何在主页中嵌套React路由

我正在尝试找出如何在主页内正确嵌套路由。这是我的路由器：

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

有一个 IndexRoute 和 Route 都指向主页似乎不是最佳的，但它给了我我正在寻找的行为。这是我的整个项目（我写这个只是为了说明这一点）。

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

另一种选择是将 Homepage 组件放在 ItemShow 组件的顶部，而不嵌套路由，但这看起来同样糟糕，甚至更糟。

看来必须有一种更好的方法来实现这种行为。它是什么？

寻找您的代码，似乎您实际上并不需要这个“items”路由，因为“/”和“/items”都呈现相同的组件（<Homepage>).

所以，如果你想避免有两个“Homepage“声明，你可以redirect每当用户访问“/”时，他们都会访问“items”。你可以通过使用来做到这一点<IndexRedirect> https://github.com/reactjs/react-router/blob/v2.5.2/docs/API.md#indexredirect or <Redirect> https://github.com/reactjs/react-router/blob/v2.5.2/docs/API.md#redirect or onEnter https://github.com/reactjs/react-router/blob/v2.5.2/docs/API.md#onenternextstate-replace-callback hook.

有关钩子的更多信息：

https://github.com/reactjs/react-router/blob/v2.5.2/docs/guides/IndexRoutes.md#index-redirects https://github.com/reactjs/react-router/blob/v2.5.2/docs/guides/IndexRoutes.md#index-redirects

如果您确实希望能够访问这两条指向same组件，也许你不需要改变任何东西。但是，就您而言，我将有一个“主页”（即使有一些虚拟信息）和一个“项目主页”，并且它将避免“主页”重复。

顺便说一句，作为一个提示，我会重命名你的<NavBar> to "<App>“或者类似的东西，因为它会更好地理解你的代码！