title: React Router - Specify parent component for unrelated routes
body: <p>I have 3 pages in my React App along with the following routes:</p>
  
  <ol>
  <li>Login (/)</li>
  <li>Dashboard (/dashboard)</li>
  <li>Projects (/projects)</li>
  </ol>
  
  <p>I would like the Dashboard and Project pages to have a header, but the Login page should not have any header.</p>
  
  <p>Currently the routes look like this:</p>
  
  <pre><code>&lt;Router&gt;
      &lt;Route path="/" component={Login}&gt;
      &lt;Route path="/dashboard" component={Dashboard} /&gt;
      &lt;Route path="/projects" component={Projects} /&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>I have created a component called <code>Shell</code> which provides just the header. How do I setup my router so that Shell is parent component for <code>Dashboard</code> and <code>Projects</code> but not the <code>Login</code> page?</p>
  
  <p><strong>Edit 1</strong></p>
  
  <p>I am wondering if it is possible to use a pathless parent like this to render the Shell around the child components:</p>
  
  <pre><code>&lt;Router&gt;
      &lt;Route path="/" component={Login}&gt;
      &lt;Route component={Shell}&gt;
          &lt;Route path="/dashboard" component={Dashboard} /&gt;
          &lt;Route path="/projects" component={Projects} /&gt;
      &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p><strong>Edit 2</strong></p>
  
  <p>Just tried the change above and it works! Reading the docs, <code>path</code> is not a required prop. So in the code above <code>&lt;Route component={Shell}&gt;</code> is perfectly legit.</p>