title: react-router: Should a nested route render a child component of the IndexRoute's component or should it render a smart parent (IndexRoute) component?
body: <p>My question is fairly simple. However, being new to React, and all of this routing stuff in general, I am unsure of how to use nested routes properly.</p>
  
  <p>If I have a 'lookbook' page stored in a parent <em>Lookbook.js</em> component, I know that my IndexRoute will render <em>Lookbook.js</em>. Something like this:</p>
  
  <pre><code>&lt;Route path="lookbook"&gt;
    &lt;IndexRoute component={Lookbook}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>Let's say the Lookbook is a photo-feed and clicking on one of these photos opens a modal with the expanded photo and extra data. Let's call this expanded photo modal component <em>PhotoDetailsModal.js</em> (and it is a child of <em>Lookbook.js</em>). I want to create a route that will load the lookbook and open a specific photo automatically, thus enabling me to provide shareable URLs to specific photos.</p>
  
  <p><strong>What is the proper way to accomplish the above using nested routes?</strong></p>
  
  <p>My first unknown has to do with the route itself, would it look something like:</p>
  
  <p>A)</p>
  
  <pre><code>&lt;Route path="lookbook"&gt;
    &lt;IndexRoute component={Lookbook}/&gt;
    &lt;Route path=":photoIdentifier" component={Lookbook}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>or</p>
  
  <p>B)</p>
  
  <pre><code>&lt;Route path="lookbook"&gt;
    &lt;IndexRoute component={Lookbook}/&gt;
    &lt;Route path=":photoIdentifier" component={PhotoDetailsModal}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>Basically, for any of my dynamic nested routes, should I render the parent component <em>Lookbook.js</em> and just have it smart enough to notice that the URL includes a photoID OR can I somehow render the PhotoDetailsModal on top of the Lookbook explicitly? </p>
  
  <p>Option B SEEMS closer to the best solution, however if I want to do all my data gathering in the parent Lookbook.js component, wouldn't Option A be better?</p>
  
  <p>Looking for any insight into best practices for this kind of use case.</p>