What's the Difference between the React Router v4 Router Types?

thelearner picture thelearner · Aug 2, 2017 · Viewed 12.7k times · Source

I have tried to learn some React basics on YouTube and from the official docs and I encountered multiple different Routers in only two videos. Sadly, the instructor did not explain anything at all and I'm even more confused than I was before.

dr: I really don't get the difference between a browser router, a 'normal' router and an index router. Thanks everyone for helping me.

Answer

canaan seaton picture canaan seaton · Aug 2, 2017

Browser Router doc

A Router that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Route doc

Its most basic responsibility is to render some UI when a location matches the route’s path.

What the heck does that stuff mean

BrowserRouter is a React Component that watches the URL and more or less passes the current path down to its children, while a Route component will render some other component based on the URL information passed to it by its parent BrowserRouter. IndexRoute is used to set a default view when rendering a specific Route Component. For more on here.

Remember, react-router is just a set of cleverly implemented vanilla react components that can be used to simulate a server-ish side route handler, which in turn makes a Single Page App appear to be multiple pages.

Hope this helps!