Scribd
Upload
3 views12 pages

React Router 13

React Router is a library for routing in React applications that enhances user experience by enabling client-side navigation in single-page applications (SPAs) without full-page reloads. It consists of core components like BrowserRouter, Routes, Route, and Link, which facilitate the management of navigation and content display based on the current URL. To set up React Router, developers need to install the 'react-router-dom' package and follow specific steps to replace traditional anchor tags with Link components and configure routing in their application.

Uploaded by

Faizan syed
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views12 pages

React Router 13

React Router is a library for routing in React applications that enhances user experience by enabling client-side navigation in single-page applications (SPAs) without full-page reloads. It consists of core components like BrowserRouter, Routes, Route, and Link, which facilitate the management of navigation and content display based on the current URL. To set up React Router, developers need to install the 'react-router-dom' package and follow specific steps to replace traditional anchor tags with Link components and configure routing in their application.

Uploaded by

Faizan syed
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CUI Abbottabad

Department of Computer Science

Web Technologies
React Router

COMSATS University Islamabad, Abbottabad Campus


Introduction
▪ What is React Router?
• A library for routing in React applications.
• Enables client-side navigation in SPAs.
▪ Why use React Router?
• Improves user experience with fast transitions.
• Avoids full-page reloads.
Router and Web single page application….
▪ In single page application, only some contents of page
changes
logo home About contacts

Sample react website

Side
Main contents bar Figure-17-9

▪ On Top:logo,Navigation bar search etc and on side left or right bar


remain same.
▪ So for each page reload all contents again and again, it is not smart
way
▪ Only we need to load the change contents
Router and Web single page application….
▪ Hence instead of loading entire page with logo, navbar,
sear, side bars we only need to bring the relevant contents
in specified area/place.
▪ It means for content change in the specific area we do not
want to reload the page, instead only contents of that
specific area change, this is done using React Routers
DOM.
▪ It means using React Router DOM we can change component
at specific place without loading page.
Core Components in React Router
▪ BrowserRouter
• Provides routing context to the app. (means that BrowserRouter
gives your app the necessary setup or environment to handle
navigation and routing.)
▪ Routes
• Defines route hierarchy in the app. It holds all the Route
components and determines which component should be displayed
based on the current URL.
▪ Route
• Maps paths to components. (Route is like a guide that decides
which content (component) to display based on the URL the user
visits.)
▪ Link
• Enables navigation without page reloads.
Setting Up React Router

Install React
Router:
npm install
react-router-
dom
Basic setup
example:
Navigation Options
Link Component:
<Link to="/about">About</Link>
Programmatic navigation:
const navigate = useNavigate();
navigate("/dashboard");
Router and Web single page application….
▪ We can use router in react by package React Router DOM, it
is not built-in in react.(In Angular, router is built-in)
▪ In google search write “react router dom” and select quick
start-React Router

Figure-17-10

▪ In this page we found guide to install and use React Router


DOM
Router and Web single page application….
We write the following command in VS Code
Terminal>npm install react-router-dom and press enter
▪ Once it install, we have to follow some steps:
1. Replace all <a> tags with <Link>
2. Inside <Link> replace all “href” attributes with “to”
3. In [Link] import {Routes, Route} from ‘react-router-dom’
4. In [Link] add/put all components which have to be routed in
<Routes><Route>..<Route>…</Routes>
5. Import {BrowserRouter} from ‘react-router-dom’ in [Link]
6. Remove Strict Mode in [Link] and put <App/> inside
<BrowserRouter></BrowserRouter>
Step-1 and Step-2
Replace all <a> with <Link> and “href” with “to”
▪ In Navbar we change it accordingly
Step-3 and Step-4
▪ In [Link]
Step-5 and Step-6
▪ In [Link]

You might also like