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

reactjs react-router react-redux react-router-v4 react-router-dom
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!

Related questions

Simple Conditional Routing in Reactjs

How to make conditional Routing, if and only if some conditions satisfies then only routing should happen. for example, if and only if the user enters the correct credentials login should be successful and the user should be able to …

Read More
React Router work on reload, but not when clicking on a link

I have setup the React with react-router version 4. The routing works when I enter the URL directly on the browser, however when I click on the link, the URL changes on the browser (e.g http://localhost:8080/categories), but the …

Read More
Use history.push in action creator with react-router-v4?

The only working method that I found to work this out without using react-router-redux to route from action creator async action completion is by passing the history prop from the component to action creator and doing: history.push('routename'); Since …

Read More