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> 
     ) 
    } 
}