React Router Single Page App

React Router Single Page App


I’m working with React Router for the first time and I’m trying to understand how React Router works on simple sites (I.e. basic landing page, product showcase, about, etc). I’ve seen examples where you click a link and it loads a whole new component while keeping the header visible on every page. This works fine but it seems different than what I normally see online. Normally you would click on a link and it would scroll to that section or you would manually scroll.

If I want to build a page where clicking a nav link scrolls to that section, would I not use React Router? Does React Router do that? Or does React Router encourage you to develop SPAs with little to no scrolling and instead just load a new component on each click?

I hope that makes sense :slight_smile:


You don’t necessarily need React-Router for that purpose. Essentially the router’s main job is to take whatever comes after the / and correspond that to a component.

What you are talking about seems to be using anchor links in your header/navbar that apply a scroll effect (vs. a jump?) to a specific section. In which case, no, it is not paramount for you to use React-Router.


the effect you are describing can be done (scrolling each “page”/route into view instead of jumping like normal web page nav) by using the ReactCSSTransitionGroup in the container you are wrapping your pages in (the one with the static header, etc). You would still use the router