Why do we use BrowserRouter in react?

Question

I am new to React. I want to know how many types are there for react routing and what is the use of each of them.

Answer 1

There's lots of different versions of react routing because developers may find the existing packages to be hard to use or understand and write their own package. Welcome to the wonderful world of javascript fragmentation ;p

As you can see from the npm page for react-router it is a widely used and well maintained package: https://www.npmjs.com/package/react-router

If you're wondering why there are different Routers within react-router each Component provides it's own purpose and use/case:

BrowserRouter: Uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

HashRouter: Uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL.

MemoryRouter: Keeps the history of your “URL” in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.

StaticRouter: A Router that never changes location. This can be useful in server-side rendering scenarios when the user isn’t actually clicking around, so the location never actually changes. Hence, the name: static. It’s also useful in simple tests when you just need to plug in a location and make assertions on the render output.

React is a powerful library with a large ecosystem. I recommend reading the official react docs and posts on medium to get up to speed.

UPDATE: Got down voted for some reason so I'm adding some extra info

BrowserRouter is used for doing client side routing with URL segments. You can load a top level component for each route. This helps separate concerns in your app and makes the logic/data flow more clear.

For example

/ - Home Component (root route of your app, this can be configured)
/login - Auth component, which handles login, forgot password and signup
/dashboard - Dashboard component
/etc - Some Other Component
/etc/another - Another Component, your routing can go as deep as you need

This kind of client side routing makes your single page app feel more like a traditional webpage/web app. It also makes it easier to share links to a specific page in your app like:

/items/1234 - Load the Item Component and you can get the 1234 which might be an id from react-router and load a resource