title: Gatsby page in page
body: <p>I'm using gatsby js and trying to figure out how to have a page level side bar with Gatsby links that render a new component inside a div in the same page I can do this using react-router-dom but in Gatsby all I can find is how to create blog posts which is driving me nuts as every tutorial I find is the same blog post. </p>
  
  <p><a href="https://i.stack.imgur.com/rgGxL.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/rgGxL.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my layout page /layouts/index.js</p>
  
  <pre><code>export default ({ children }) =&gt; (
    &lt;div id="layout"&gt;
      &lt;header&gt;
        &lt;h3&gt;Header&lt;/h3&gt;
        &lt;MainNav /&gt;
      &lt;/header&gt;
      {children()}
    &lt;/div&gt;
  )
  </code></pre>
  
  <p><strong>About Page</strong>
  /pages/about.js</p>
  
  <pre><code>export default ({ location, match }) =&gt; {
    console.log('location = ', location, 'match = ', match );
    return (
      &lt;div id="about"&gt;
        &lt;SideBar /&gt;
        &lt;div id="content"&gt;
          // . add child template or component for link clicked in sidebar
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>What I'm trying to do is when a user clicks on a link in the side bar stay on about but render a new component or template based on the gatsby-link clicked in the about sidebar. </p>
  
  <p><strong>The About SideBar component</strong>
  /components/about/side-bar.js</p>
  
  <pre><code>const SideBar = () =&gt; {
    return (
      &lt;div id="side-bar"&gt;
        {/* &lt;li&gt;&lt;Link to='/about?sort=name'&gt;work&lt;/Link&gt;&lt;/li&gt; */}
        &lt;li&gt;&lt;Link to="/about/work"&gt;work&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to='/about/hobbies'&gt;hobbies&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to='/about/buildings'&gt;buildings&lt;/Link&gt;&lt;/li&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Problem with the links above, they are trying to go to a new page called. 
  <strong>/about/work</strong>
  This is not what I'm trying to do. Again I'm trying to make it stay on about but render a new component inside the content div.</p>
  
  <p>Please help gatsby is so all over the place as far as docs goes. ok maybe its just me and not getting the docs clearly. 
  Thanks  </p>
  
  <p><strong>UPDATE:</strong> 
  I tried adding a page suing createPage which works for me kind of but it doesn't pass the match.params id </p>
  
  <p><strong>gatsby-node.js</strong></p>
  
  <pre><code>exports.createPages = ({ boundActionCreators }) =&gt; {
    const { createPage } = boundActionCreators;
    const myComponent = path.resolve('src/pages/about/index.js');
    createPage({
      path: '/about/:id',
      component: myComponent
    })
  }
  </code></pre>