Navigation Within Section Of A Page Using React Router

I have my navigation bar with following contents +------+-------+-------+ | Home | About | Login | +------+-------+-------+ Home is vertically scroll-able page with multiple secti

Solution 1:

React Router currently does not handle scroll behavior for hash anchors.

However, if you're using browser history, in your case, you can just use <a href="#about-us">, and let the browser take care of it.

Solution 2:

I've run into the same problem! The fix I'm using is below...

animatedScroll: function(div_to_scroll_to) {
  jQuery('html, body').animate({
    scrollTop: div_to_scroll_to.offset().top
  }, 500);
}

Clicking the About link should trigger an onClick event which calls animatedScroll with the div you want to scroll to (which is a jQuery element in the above code) as the parameter.

This avoids page reloads (which is how the <a href="..." ... fix would work) and requires very little work on your part.

Hopefully the React-Router team will have built handlers for intra-component navigation soon.

Good luck!

Note: Depending on how your page is structured jQuery('html, body') may not be appropriate. This should always just be the parent container. Please let me know if you have any further questions.