score:7

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.


Related Query

More Query from same tag