How to organise components for a single page scrolling website in React?

Question

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.

Basically, I'm trying to make this exact same site, but in react: http://codepen.io/drhectapus/pen/bBpYoZ

The problem is, I'm not exactly sure how to organise my components for this single page layout.

This is how I've organised it so far in my index.js file:

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div className='app-container'>
        <Nav />
        <Switch>
          <Route path='/contact' component={Contact} />
          <Route path='/work' component={Work} />
          <Route path='/about' component={About} />
          <Route path='/' component={Home} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>,
  document.querySelector('#app')
);

Any help greatly appreciated :)

Answer 1

So from the comment you gave, I take it that what you want is;

1. A single page with multiple scrollable sections.

2. The ability to use browser navigation to bookmark scroll positions.

To do this, first we want to specify what the page looks like. Since all elements need to be rendered at once, it should be something like this;

Container = React.createClass({
    render: function(){
        return <div>
            <Home/>
            <Contact/>
            <Work/>
            <About/>
        </div>;
    }
});

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div className='app-container'>
        <Nav />
          <Route path='/' component={Container} />
      </div>
    </BrowserRouter>
  </Provider>,
  document.querySelector('#app')
);

Next, we will update the router to include multiple paths... but each will still render the same output;

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div className='app-container'>
        <Nav />
          <Route path='/contact' component={Container} />
          <Route path='/work' component={Container} />
          <Route path='/about' component={Container} />
          <Route path='/' component={Container} />
      </div>
    </BrowserRouter>
  </Provider>,
  document.querySelector('#app')
);

Finally, we set up onEnter triggers on each route to scroll to a specified html element, by id;

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div className='app-container'>
        <Nav />
          <Route path='/contact' component={Container} 
              onEnter={function(){
                  document.getElementById("contact_id").scrollIntoView();
                  }
              }
          />
          <Route path='/work' component={Container} 
              onEnter={function(){
                  document.getElementById("work_id").scrollIntoView();
                  }
              }
          />
          <Route path='/about' component={Container} 
              onEnter={function(){
                  document.getElementById("about_id").scrollIntoView();
                  }
              }
          />
          <Route path='/' component={Container} 
              onEnter={function(){
                  document.getElementById("home_id").scrollIntoView();
                  }
              }
          />
      </div>
    </BrowserRouter>
  </Provider>,
  document.querySelector('#app')
);

Just make sure to have corresponding html elements with the appropriate id's and you should be all set.