在IndexRoute下嵌套

时间:2016-07-08 07:15:33

标签: reactjs react-router

我写了一个应用程序来教自己Flux和React Routers,而我却陷入了嵌套路线。我有一个公园列表,当你点击其中一个公园时,它会显示一个显示页面。如果我的路线嵌套如下,这样可以正常工作:

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

我得到 - “警告:[react-router]位置”parks / 2“与任何路线都不匹配”

并且 - “警告:[react-router]位置”/ parks / 2“与任何路线都不匹配”

1 个答案:

答案 0 :(得分:2)

索引页面内的路由是错误的方式

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

以上是唯一正确的方法 以这样的方式设计您的应用程序将AppIndex的内容移动到APP并在APP组件中使用this.props.children。 您应该显示Appindex或ParkShow