title: How to organise components for a single page scrolling website in React?
body: <p>I'm trying to create a single page scrolling portfolio page where all the content is on one page and there's a navbar at the top which can direct you to different sections of the page. </p>
  
  <p>Basically, I'm trying to make this exact same site, but in react: <a href="http://codepen.io/drhectapus/pen/bBpYoZ" rel="noreferrer">http://codepen.io/drhectapus/pen/bBpYoZ</a></p>
  
  <p>The problem is, I'm not exactly sure how to organise my components for this single page layout.</p>
  
  <p>This is how I've organised it so far in my index.js file:</p>
  
  <pre><code>ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;BrowserRouter&gt;
        &lt;div className='app-container'&gt;
          &lt;Nav /&gt;
          &lt;Switch&gt;
            &lt;Route path='/contact' component={Contact} /&gt;
            &lt;Route path='/work' component={Work} /&gt;
            &lt;Route path='/about' component={About} /&gt;
            &lt;Route path='/' component={Home} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;,
    document.querySelector('#app')
  );
  </code></pre>
  
  <p>Any help greatly appreciated :)</p>