title: React router v4 render component inside element
body: <p>I'm using the latest version of React Router v4 and I'm trying to render my page components Home/About inside the <code>PageWrap</code> div but the problem I'm having is that if I add the Routes into my header then it will switch the routes but they will display the Home/About component as part of the header and no where I want them to be.</p>
  
  <p>If I put the routes into the <code>PageWrap</code> then the router doesn't work but doesn't throw any errors on the console.</p>
  
  <p>How can I display and switch between components in the <code>PageBody</code> div?</p>
  
  <p><a href="https://www.webpackbin.com/bins/-KiL_jFvVYE4FeEiMG_I" rel="nofollow noreferrer">Webpack link</a></p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React from 'react'
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
  import styled from 'styled-components'
  import Header from './Header'
  
  import Home from './pages/Home'
  import About from './pages/About'
  
  
  const Wrapper = styled.div`
    display:flex;
    min-height:100vh;
   flex:1;
   background:#eee;
  `
  const PageWrap = styled.div`
   margin:0 auto;
   min-width:1400px;
   background: #000;
  `
  
  class App extends React.Component { // eslint-disable-line react/prefer-
  stateless-function
    render() {
      return (
    &lt;div&gt;
      &lt;Header /&gt;
      &lt;Wrapper&gt;
        &lt;PageWrap&gt;
          &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/login" component={Home} /&gt;
              &lt;Route exact path="/frontpage" component={About} /&gt;
              &lt;Route exact path="/logout" render={() =&gt; (&lt;div&gt;logout&lt;/div&gt;)} /&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        &lt;/PageWrap&gt;
      &lt;/Wrapper&gt;
    &lt;/div&gt;
  )
  }
  }
  export default App
  </code></pre>
  
  <p><strong>Header.js</strong></p>
  
  <pre><code>import React from 'react'
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
  import styled from 'styled-components'
  import Home from '../pages/Home'
  import About from '../pages/About'
  import Topics from '../pages/Topics'
  
  const Wrapper = styled.div`
    width:100%;
    height:100px;
    background:papayawhip;
  `
  
   class Header extends React.Component { // eslint-disable-line react/prefer-
   stateless-function
    render() {
     return (
     &lt;Router&gt;
      &lt;Wrapper&gt;
        &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to="/topics"&gt;Topics&lt;/Link&gt;&lt;/li&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route exact path="/about" component={About} /&gt;
        &lt;Route path="/topics" component={Topics} /&gt;
      &lt;/Wrapper&gt;
    &lt;/Router&gt;
    )
    }
  }
  
  
  export default Header
  </code></pre>
  
  <p><strong>home.js</strong></p>
  
  <pre><code>const Home = () =&gt; (&lt;div&gt;Home&lt;/div&gt;)
  </code></pre>
  
  <p><strong>About.js</strong></p>
  
  <pre><code>const About = () =&gt; (&lt;div&gt;About&lt;/div&gt;)
  </code></pre>