嵌套在IndexRoute

Question

我写了一个应用程序来教自己Flux和React路由器，并且我陷入了嵌套路线。我有一个公园列表，当你点击其中一个公园时，它会出现一个显示页面。这工作正常，如果我有我的路线嵌套像这样：

const appRouter = (
    <Router history={ hashHistory }> 
    <Route path="/" component={ App }> 
     <IndexRoute component={ AppIndex }/> 
     <Route path="parks/:parkId" component={ ParkShow }/> 
    </Route> 
    </Router> 
) 

但是，那不是我想要的。我想要显示在AppIndex页面中点击的公园的信息。这就是我要实现这一目标：

const appRouter = (
    <Router history={ hashHistory }> 
    <Route path="/" component={ App }> 
     <IndexRoute component={ AppIndex }> 
     <Route path="parks/:parkId" component={ ParkShow }/> 
     </IndexRoute> 
    </Route> 
    </Router> 
) 

我得到 - “警告：[反应路由器]的位置‘公园/ 2’不匹配任何路线”

而且 - “警告：反应路由器]的位置“/园区/ 2”内的索引页是一个错误的方式

const appRouter = (
    <Router history={ hashHistory }> 
    <Route path="/" component={ App }> 
     <IndexRoute component={ AppIndex }/> 
     <Route path="parks/:parkId" component={ ParkShow }/> 
    </Route> 
    </Router> 
) 

上面一层是唯一正确途径 设计应用在这样的不匹配任何路线”

Answer 1

路线一个 将AppIndex的内容移动到APP并在APP组件中使用this.props.children。 您应该显示Appindex或ParkShow