title: React Router 4.1.1 put header component in every other component w/o importing
body: <p>I am trying to find documentation from the react router website <a href="https://reacttraining.com/react-router" rel="nofollow noreferrer">https://reacttraining.com/react-router</a>, and I cant seem to find a solution to have nested routes work in 4.1.1. For example in the older version of React Router, you would be able to nest Routes like so:</p>
  
  <pre><code>&lt;Router history={history}&gt;
      &lt;Route exact path="/" component={App}&gt;
          &lt;Route path="/cards" component={Example} /&gt;
      &lt;/Route&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>This used the {this.props.children} and made it easy to have static components such as a navbar exist all through the application without having to import it in every component. </p>
  
  <pre><code>class App extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Header/&gt;
                      &lt;main&gt;{ this.props.children }&lt;/main&gt;
                  &lt;Footer/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>How can I have similar behavior with version 4.1.1. I do not want to import the header component all the time in the components.</p>
  
  <p>I am using  at the moment, but it does not seem to accomplish what I am trying to do.</p>
  
  <pre><code>    &lt;Router history={history}&gt;
          &lt;Switch&gt;
              &lt;Route exact path="/" component={App}&gt;
                  &lt;Route path="/cards" component={Example} /&gt;
              &lt;/Route&gt;
          &lt;/Switch&gt;
      &lt;/Router&gt;
  </code></pre>