Question

这就是我的路由的外观：

<Router history={createBrowserHistory()}>
     <Route path="/" component={App}>
       <IndexRoute component={EventAppContainer}/>
       <Route path="fights" component={FightApp}/>
       <Route path="fighters" component={FightersAppContainer}>
         <Route path="/fighter/:id" component={FighterDetails} />
       </Route>
     </Route>
   </Router>

在FightersAppContainer中，我获取了一些数据，如果我从那里渲染所有内容，我的嵌套路由就能完美地工作。但是，如果我想要更多的子组件，例如FightersAppContainer =＆gt; FightersApp =＆gt; FighterItem，那么我无法达到我的嵌套路线。我没有得到任何错误，它只是没有显示出来。我该如何解决这个问题？

为了更清楚我是否在FightersAppContainer中使用<Link to={"/fighter/"+fighter.id}>{fighter.last_name}</Link>我实现了我想要的。但是如果我在里面试试FighterItem组件（那是FightersAppContainer组件的子组件）那么我就没有得到想要的结果，事实上我没有得到任何包括错误...... < / p>

Answer 1

问题在于：

<Route path="/fighter/:id" component={FighterDetails} />

作为战士路径的孩子，会期望路线为/ fighters / fighter /：id，所以如果你不在战斗机元素本身，你的Link元素必须看起来像这样：

<Link to={"/fighters/fighter/"+fighter.id}>{fighter.last_name}</Link>

React-router嵌套的rotues

1 个答案: