React Router - Specify parent component for unrelated routes

Question

I have 3 pages in my React App along with the following routes:

1. Login (/)
2. Dashboard (/dashboard)
3. Projects (/projects)

I would like the Dashboard and Project pages to have a header, but the Login page should not have any header.

Currently the routes look like this:

<Router>
    <Route path="/" component={Login}>
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/projects" component={Projects} />
</Router>

I have created a component called Shell which provides just the header. How do I setup my router so that Shell is parent component for Dashboard and Projects but not the Login page?

Edit 1

I am wondering if it is possible to use a pathless parent like this to render the Shell around the child components:

<Router>
    <Route path="/" component={Login}>
    <Route component={Shell}>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/projects" component={Projects} />
    </Route>
</Router>

Edit 2

Just tried the change above and it works! Reading the docs, path is not a required prop. So in the code above <Route component={Shell}> is perfectly legit.

Answer 1

What you have in Edit 1 is correct.

<Router>
  <Route component={Login}>
  <Route component={Shell}>
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/projects" component={Projects} />
  </Route>
</Router>

And in your <Shell> component, you can do:

import Header from './Header';

...

render() {
  return (
    <div id="shell">
      <Header />
      {this.props.children}
    </div>
  );
}
...