title: Nested Routes in REACT ROUTER DOM, wrapping Components in Router
body: <p>I have 2 components, I want One component common in some of  the routes and other component common in remaining routes. </p>
  
  <p>In the both component I am using {props.children} in both component for the nested routes.</p>
  
  <p>MY code is :</p>
  
  <pre><code>&lt;Router history={history}&gt;
    &lt;div className='routeContainer'&gt;
      &lt;Switch&gt;
  
        &lt;Component1&gt;
          &lt;Route exact path='/' component={Dashboard} /&gt;
          &lt;Route exact path='/abc' component={ComponentAbc} /&gt;
        &lt;/Component1&gt;
  
        &lt;Component2&gt;
          &lt;Route exact path='/def' component={ComponentDEF} /&gt;
          &lt;Route exact path='/xyz' component={ComponentXYZ} /&gt;
        &lt;/Component2&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>In Component1 and Component 2 i am using {this.props.children}
  its as below :</p>
  
  <pre><code>render () {
   return (
    &lt;div&gt;
  
        &lt;SideBar /&gt;
        &lt;Header /&gt;
        {this.props.children} 
    &lt;/div&gt;
   )
  }
  </code></pre>
  
  <p>This is not working, Please Help to make this structure working.</p>