title: How to make a layout in React Router v4
body: <p>I've done a lot of googling but cannot solve the issue I have...</p>
  
  <p>I am building a social network profile page with different sections on it. I want the core profile information to always be visible, but clicking certain links like 'photos' to change other components.</p>
  
  <p>Here is my code:</p>
  
  <p>App.js (routes)</p>
  
  <pre><code>class App extends React.Component {
    [ ... ]
  
    render() {
      return (
        &lt;Router&gt;
  
            &lt;Navigation {...props} /&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/u/:id" component={Profile} /&gt;
              &lt;Route component={NotFound} /&gt;
            &lt;/Switch&gt;
            &lt;Footer /&gt;
        &lt;/Router&gt;
      );
    }
  }
  </code></pre>
  
  <p>Profile Component (changes what is rendered based on user account type):</p>
  
  <pre><code>const renderProfile = (user, id, type) =&gt; {
    if (type === 'artist') {
      return &lt;Route render={() =&gt; &lt;ArtistProfilePage id={id} /&gt;} /&gt;;
    } else {
      [ ... ]
    }
  };
  
  const Profile = ({ loading, user, id, type }) =&gt; (&lt;div&gt;
    { !loading &amp;&amp; renderProfile(user, id, type) }
  &lt;/div&gt;);
  </code></pre>
  
  <p>ArtistProfilePage (this is the page I want to always display certain components but load different ones if the URL changes:</p>
  
  <pre><code>class ArtistProfilePageNew extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;div className="ArtistProfilePage"&gt;
          &lt;ArtistInfo /&gt;
  
          &lt;Link to="/"&gt;Artist Media&lt;/Link&gt;
  
          &lt;Link to="lineup"&gt;Line-up&lt;/Link&gt;
  
          &lt;Link to="gigs"&gt;Gigs&lt;/Link&gt;
  
          &lt;Switch&gt;
            &lt;Route path="/" render={() =&gt; &lt;ArtistMedia /&gt;} /&gt; // this works
            &lt;Route path="/lineup" render={() =&gt; &lt;ArtistLineup /&gt;} /&gt; // this doesn't
          &lt;/Switch&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>What I am trying to achieve is that when the url is <code>u/:id</code> and the user type is 'artist', the <code>ArtistProfilePage</code> component is displayed. This is working</p>
  
  <p>By default I want the ArtistProfilePage to render the <code>&lt;ArtistMedia /&gt;</code> component which is also working</p>
  
  <p>My issue is that when a user clicks the link for <code>lineup</code> so the URL becomes <code>u/:id/lineup</code>, the app shows the 404 page as opposed to rendering the <code>&lt;ArtistLineup /&gt;</code> component under <code>&lt;ArtistInfo /&gt;</code> and the links.</p>
  
  <p>What am I doing wrong? Thanks</p>