What is the purpose of React Router? What is the purpose of React Router? express express

What is the purpose of React Router?


Client side routing is required to keep your application in sync with the browser URL.

It is mainly useful for Single Page Applications where the backend will be used for RESTful API calls via XHR or AJAX calls.

Being a SPA uses can book mark your URL and when they hit the URL again , your application should load that page with the data and its state.

The main difference between Server side routing and client side routing:
1. In Server Side routing you download(serve) the entire page.
2. In client Side routing along with the entire page, you can serve a specific portion of a page, reuse the DOM, manually manage the URL and history states. eg.

www.something.com/page1/tab1 will show tab1 in the UI
www.something.com/page1.tab2 will show tab2 in the UI

In this way the url can get more complex and you can have sub-routes with states.


Those who need a client-side router, need it for state management. Say you have server-rendered pages, but with some client-side widgets - e.g. a calendar, set of filters or collapsed or open sidebar. Router helps you initialize these components of the page in the exact state you want them. Granted, you could do most of it and all of the use cases I've named on the server, too. But it's usually a lot easier to handle these on the client. You might render it faster on the server, but sometimes, especially when doing partial page updates, it's cheaper and faster to handle that client-side.