Scribd
Upload
11 views

React Router

Rr

Uploaded by

reherow
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

React Router

Rr

Uploaded by

reherow
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

React Router:-

Introduction:- React router is one of React's important libraries for


creating amazing UI. It allows users to navigate between web pages
without reloading the page or interacting with the server. Since React
framework doesn’t come with an inbuilt routing feature, react router is
the solution and most used.

In traditional websites that are not single-page applications, when we


click on a link on the website, it sends a request to a server for a brand
new HTML page. React works with SPAs (single-page applications),
that handle all of the browser's routing on the frontend and don't
send any additional requests to the server for a new page.

In this tutorial, we will learn the following:

 About React router


 How to install React router
 Using React router in routing between pages.

Setting up the Router and Configuring routers:-


To install React router, go to your code editor terminal, and in the root
directory of your project, type:

npm install [email protected]


Now that our router package is installed, we can start setting it up and
adding a few different routes.

Next, we will install our BrowserRouter module inside our root


component and wrap our entire application inside the BrowserRouter
component, and inside this component, we will set up our different
routes by specifying which component should be rendered for each
route.

There are four important tags needed to create a basic React router in
our React application: BrowserRouter, Routes, Route, and Link.

 BrowserRouter: It's a component that wraps our entire


application and allows us to use the routes within it.
 Routes and Route: These are the modules that allows us to set
up routes.
 Link/NavLink: We use this to create links between pages.

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

Example:
Output:

Navigating between the routes:-


The navigate component is among the built-in components shipped in
with React router version 6. It is a component similar to
the useNavigate hook. Internally it uses useNavigate to redirect the location.
The props passed to Navigate are the same as the arguments passed to the
function returned by useNavigate.
While functional components in React support hooks, ES6 classes do not.
Hence, when dealing with class-based React components, Navigate serves
as a convenient alternative to useNavigate.

Import the Navigate component to start using it:


import { Navigate } from "react-router-dom";
Example :
Output:

Use of React Router:-


1. Navigation and Routing: React Router provides a declarative way to
navigate between different views or pages in a React application. It allows
users to switch between views without refreshing the entire page.
2. Dynamic Routing: React Router supports dynamic routing, which means
routes can change based on the application’s state or data, making it
possible to handle complex navigation scenarios.
3. URL Management: React Router helps manage the URLs in your
application, allowing for deep linking, bookmarkable URLs, and
maintaining the browser’s history stack.
4. Component-Based Approach: Routing is handled through components,
making it easy to compose routes and navigation in a modular and
reusable way.

Navigating between routes and passing parameters:-


React JS useParams Hook helps to access the parameters of the current
route to manage the dynamic routes in the URL. The react-router-dom
package has useParams hooks that let you access and use the parameters
of the current route as required.

What is useParams?

is a hook that allows you to have access to dynamic


useParams
parameters in the URL(Uniform Resource Locator).

You can use the useParams hook in the rendered component to retrieve the parameters
like so:

App.js
About.js

Home.js

You might also like