React JS | Router

React Router

React Router handle the client and server-side routing in React applications that allow navigating without refreshing the page. It is mainly used to create Single Page Application. React Router makes it simple to manage the URL and state of application.

react-router-dom

react-router-dom is used to build single-page applications i.e. applications that have many pages or components but the page is never refreshed instead the content is dynamically fetched based on the URL. This process is called Routing and it is made possible with the help of React Router Dom. react-router-dom is pure JavaScript npm package.

add react-router-dom

To add React Router in your application, run this in the terminal from the root directory of the application:

npm i react-router-dom;        

import react-router-dom

to import react-router-dom in your application, add this in your router JavaScript file.

import { BrowserRouter, Routes, Route } from "react-router-dom";        

Component of react-router-dom

• BrowserRouter: It is the parent component that is used to store all of the other components.

Apply the following code to import the react BrowserRouter component:

import { BrowserRouter as Router} from 'react-router-dom';        

Where, BrowserRouter is renamed to Router

• Routes: are used to define the navigation paths within a single-page application

Apply the following code to import the react Router component:

import { Routes} from 'react-router-dom';        

• Route: This component checks the current URL and displays the component associated with that exact path.

Apply the following code to import the react Route component:

import {Route} from 'react-router-dom';        

• Link: Link component is used to create links to different routes.

Apply the following code to import the react Link component:

import { Link} from 'react-router-dom';        

• NavLink: Similar to Link but it provides additional styling attributes when the link is active. It is commonly used for navigation menus where you want to highlight the active link.

Apply the following code to import the react NavLink component:

import { NavLink } from "react-router-dom";