React-router嵌套循环

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=>FightersApp=>FighterItem，那么我就无法到达我的嵌套路由。我没有得到任何错误，它只是没有显示出来。我该如何解决这个问题呢？

更清楚地说，如果我在FightersAppContainer中使用<Link to={"/fighter/"+fighter.id}>{fighter.last_name}</Link>，我就可以实现我想要的。但是如果我在FighterItem组件(它是FightersAppContainer组件的子组件)中尝试，那么我不会得到想要的结果，事实上，我不会得到任何东西，包括错误……

Answer 1

问题是：

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

作为fighters路径的子节点，路由应该是/ fighters /fighter/:id，所以如果您不在fighters元素本身，那么您的Link元素必须如下所示：

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