Scribd
Upload
3 views

ReactRouter (1)

React Router facilitates client-side routing, allowing the creation of complex multi-page web applications that function like single-page applications. It enables navigation between different views without reloading the entire page by defining and managing routes. Key components include createBrowserRouter for managing routes, RouterProvider for monitoring user navigation, Route for rendering UI based on the URL, and Link for creating navigational links.

Uploaded by

kuamrranjan13
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

ReactRouter (1)

React Router facilitates client-side routing, allowing the creation of complex multi-page web applications that function like single-page applications. It enables navigation between different views without reloading the entire page by defining and managing routes. Key components include createBrowserRouter for managing routes, RouterProvider for monitoring user navigation, Route for rendering UI based on the URL, and Link for creating navigational links.

Uploaded by

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

React-Router

Introduction
•React Router enables "client side routing".
•In traditional websites, the browser requests a document from a web server, downloads and
evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user
clicks a link, it starts the process all over again for a new page.
It allows you to create complex, multi-page web applications that feel like traditional websites
while still being single-page applications (SPAs) under the hood.
With React Router, you can define and manage routes, enabling users to navigate through
different views of your application without having to request a new HTML page from the server.
How to install

Write the Following Command in the terminal:

npm install react-router-dom


•Now Create Different Pages which you want to use for Navigation.
•For Example: Home, About, Contact, Login, Help
•For a better Practice create a Folder Named as Component and add all these component Inside
that
Now import All These Files in your App.js
Header file
First Step
Import the following from React-router-dom in your App.js

import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
Key Concept
CreateBrowserRouter : The createBrowserRouter method receives an array that contains
information on which components must be rendered on which path. BrowserRouter is a router
implementation that uses the HTML5 history API (pushstate, replacestate, and popstate events)
to keep your UI in sync with the URL.
Router Provider: The Router Provider in React Router is similar to the traffic controller of our
React apps. It helps us monitor how users move between pages and objects in a single-page
application (SPA).
Route: Route is the conditionally shown component that renders some UI when its path
matches the current URL.
Link: The link component is used to create links to different routes and implement navigation
around the application
path represents the URL path to the component it represents.
element describes the component that the path points to.
Now Return the following

You might also like