× logo Home HTML CSS Javascript React-App Angular.js logo

What is react router?

Is the process of resource navigation in a web app. This is how your app determines what to do with a client request.
For example:

When an HTTP GET request is made to the homepage of this web app, it returns "Hello World!"

React router.

A tool that allows you to handle routes in a web app, using dynamic routing. Dynamic routing takes place as the app is rendering on your machine, unlike the old routing architecture where the routing is handled in a configuration outside of a running app. React router implements a component-based approach to routing. It provides different routing components according to the needs of the application and platform. The following illustration shows how react router’s dynamic routing works as compared to traditional static routing:

React router in action

Here is a really simple single page app (SPA) that implements routing using React Router.

There is one component NavBar that appears on the top of the app and enables switching between different views namely, Home and About . The router.js file is where all the routes of the SPA can be defined. In routes.js , first, the components, views, and required packages are imported (Line 1-5). Then all those routes are defined that the SPA can take, keeping the Home component the default route (Line 13-15). And then all the possible routes are simply added using the following template, between Switch tags: The component (componentName) will be rendered when the "/specifiedPath" is visited on the web app.
Importing these routes from routes.js to index.js file, putting them inside a Router tag is all that is needed as the last step.

React Router can be installed using the npm cli utility:
and then can be imported and used inside the SPAs.

React routing vs Conventional routing

How is react Router different from conventional routing?
React Router uses dynamic routing. React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates.
React Router uses component structure to call components, which display the appropriate information.

Conventional Routing

In general, when the user types an URL in the browser, an HTTP request is sent to the server, which then retrieves the HTML page. For each new URL, the user is redirected to a new HTML page.
You can refer to the below diagram to get a better understanding of how Routing works.