Question

我写了一个应用程序来教自己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“与任何路线都不匹配”

Answer 1

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

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

在IndexRoute下嵌套

1 个答案: