React Routing
React Routing provides a way to navigate between different components or pages without
reloading the entire page. For instance, when you create a Navbar with links like Home, About
Us, etc., clicking these links updates the content dynamically without causing a page refresh.
This smooth transition allows for a more seamless user experience, as only the content changes
while the page structure remains intact.
How to Use React Routing :-
STEP 1: INSTALL REACT-ROUTER-DOM
First, install the react-router-dom package, which provides routing capabilities in React.
npm install react-router-dom
Step 2: Set Up The Router In [Link]
Import BrowserRouter, Routes, and Route from react-router-dom to configure routing in your
main [Link] file.
import React from 'react';
import { createBrowserRouter ,RouterProvider } from 'react-router-dom';
Step 3: Create A Variable Of createBrowseRrouter In [Link]
Create a variable of createBrowserRouter and make a array of Object and put the path and elements
like if path is “/” so this element will show
const router =createBrowserRouter([
{
path:"/",
element: <>
<Navbar title ="Textutiles" mode={mode} toggleMode={toggleMode}/>
<Alert alert={alert} />
<Textform heading="Enter your text here" showAlert={showAlert}
Heading='CONVERT YOUR VALUE HERE' mode={mode}/>
</>
},
{
path:"/About",
element:<><Navbar title ="Textutiles" mode={mode}
toggleMode={toggleMode}/><About/></>
}
])
Step 4: Provide Routerprovider
Create a routerProvider in return function in [Link]
<RouterProvider router={router} />
Step 5: Go To Navbar You Wanna Link
Import the {Link} from react dom to replace the <a> tag to <Link>
import { Link } from 'react-router-dom';
Step 6: Replace The Anchor Or Href
Replace the anchor tag to link tag and href to “to”
<Link to="/">Home</Link>
Now your routing successfully connected to your all page
NavLink:-
We have NavLink also , Navlink is used for Navbar mainly because of
class changes we can give “active-link ” class if we open link it will show
the link is active..
Example:-
<NavLink to=”/” className={({isActive})=> isActive ? “active-link” : ” ” }
> Home<NavLink/>
isActive is function that’s check , the link you open is active or not link
you are in that page or not …
{}the first bracket is for js if we wanna write js in class we have to open
{}this bracket
The second () for parameter I give a parameter {isActive} in that is
isActive is there than I can compare the other value with it.
The isActive ? this one check is isActive is true then put this class in it
“active-link ” and if not then “ null”.
The “active-link” is the raw css . I will change the property by selecting
the active-link and put css in it.
Parameters:-
What is parameters?
The parameters the id and post that show when we click on any link..
It will show with the link, Like
Ex- [Link]/id=234dfgh567? Post=hhjk
We will learn how can we handle the parameters in React Routing.
*useParams->
useParams is a hook that we use when we have to pass any id or
parameters In routing
Step-1
Create a another route in createBrowserRoute {path:”/student/:id”}
and for the element :<Navbar/><[Link]/>
//the :id is parameter anything after “/student/..”is parameter -> the :id
is the name I give for that parameter
Step-2
Create another component for the parameter where we get the
parameter . //[Link]
Step-3
In the new component we will pass the useParams hook like->
Import{useParams} from ‘react-router-dom’.
Step-4
Now make a hook for parameter
Const{id}= useParams();
// I chose id here because I give before /student/:id
Step-5
Now print the output inside the return case
//params:{id}