React router and nested routes
<p>I am confused about how to create the following (really simple) route structure.</p>

<p>I have an app that has a top-level route for the Login component:</p>

<p><a href="https://i.stack.imgur.com/W94SJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W94SJ.png" alt="enter image description here"></a></p>

<p>and another top-level route for the app itself (let's call it the Home component):</p>

<p><a href="https://i.stack.imgur.com/GKUqE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GKUqE.png" alt="enter image description here"></a></p>

<p>now, the Home component has a header, a sidebar, and the main space for the child views.</p>

<p>The Login component should be shown at <code>/login</code> path; that's simple enough. But what confuses me is that I want the <code>/</code> path to show the Home component with a particular child component (let's call it Welcome) in the main view. Also, most of the other routes that I can think of should render child components inside the Home component.</p>

<p>So, to reiterate:</p>

<p>path <code>/</code> renders the Home component with the Welcome component inside it</p>

<p>path <code>/foo</code> renders the Home component with the Foo component inside it</p>

<p>...</p>

<p>path <code>/login</code> renders the Login component </p>

<p>It feels like the structure that I am thinking about is:</p>

<pre><code>  &lt;Route path='/' component={App}&gt;
    &lt;IndexRoute component={Home}&gt;
        &lt;IndexRoute component={Welcome}&gt;
        &lt;Route path='foo' component={Foo}/&gt;
    &lt;/IndexRoute&gt;
    &lt;Route path='login' component={Login}/&gt;
  &lt;/Route&gt;
</code></pre>

<p>but this is clearly wrong. What would be the correct way to implement this routing structure?</p>