react-router：嵌套的路由是否应该呈现IndexRoute组件的子组件，还是应该呈现智能父组件（IndexRoute）？

Question

我的问题很简单。但是，对于React，以及所有这些路由的东西都是新手，我不确定如何正确使用嵌套路由。

如果我有存储在一个父Lookbook.js分量，我知道我的IndexRoute将呈现Lookbook.js一个“月刊广告页面。事情是这样的：

<Route path="lookbook"> 
    <IndexRoute component={Lookbook}/> 
</Route> 

比方说，的Lookbook是光饲料和点击其中一张照片中打开带有扩展照片和额外数据的模式。我们称之为扩展照片模式组件PhotoDetailsModal.js（并且它是Lookbook.js的孩子）。我想要创建一个路径来加载该lookbook并自动打开一张特定的照片，从而使我能够为特定的照片提供可共享的URL。

上述使用嵌套路由的正确方法是什么？

我的第一个未知的具有路由自己做的，它看起来是这样的：

A）

<Route path="lookbook"> 
    <IndexRoute component={Lookbook}/> 
    <Route path=":photoIdentifier" component={Lookbook}/> 
</Route> 

或

B）

<Route path="lookbook"> 
    <IndexRoute component={Lookbook}/> 
    <Route path=":photoIdentifier" component={PhotoDetailsModal}/> 
</Route> 

基本上，对于我的任何动态嵌套路由，我应该渲染父组件Lookbook.js只是有足够的智能，注意到URL包含一个photoID，或者我可以以某种方式显式地在Lookbook之上渲染PhotoDetailsModal？

选项B似乎更接近最佳的解决方案，但是如果我想要做我的所有数据收集在父Lookbook.js成分，也不会选择A更好吗？

寻找任何洞察这种用例的最佳实践。

Answer 1

您应该废除IndexRoute并使用常规路径来嵌套模式。

// Routes 
<Route path="/" component={Application}> 
    <Route path="lookbook" component={Lookbook}> 
     <Route path=":photoIdentifier" component={PhotoDetailsModal} /> 
    </Route> 
</Route> 



// Lookbook.jsx 
class Lookbook extends Component { 
    constructor() { 
     this.state = {} 
    } 
    render() { 
     return (
      <div> 
       <h1>This is the look up page</h2> 
       <h2>Renders a modal if children in props</h2> 
       {this.props.children} 
      </div> 
     ) 
    } 
}