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