Day 28 of My React Learning Journey - useContext,React router,BrowserRouter & useNavigate

React helps us to share data between components and navigate b/w different pages without reloading the entire website.

1.UseContext:

It is a React Hook Component that allows to access shared data without passing props through every intermediate component and avoid props drilling.
Example:

`import {createContext,useContext} from "react";
const UserContext = createContext();

function App(){
return(

);

}

function Profile(){
const user = useContext(UserContext);
return

Welcome{user}

;
}

export default App;`

Output:
Welcome Sam
`
2.React Router:
React Router is a library used to handle navigation between diffrent routes in a react application.
Example:
An application have

• Home page
• About page
• Contact page
• Login page

React router helps us display the correct component based on current url.

3.What is BrowserRouter?
It is a router component that uses browser's history API to manage navigation.
It allows us to use normal URLs such as:

• /home
• /aboutus
• /contact _ Example:_ `import{BrowserRouter} from "react-router-dom";

function App(){
return(

{/Routes will be placed here/}

);
}

export default App;`

4.What is Router and Routes?

A route connects a URL path wih a particular React component.
Example:
`import{BrowserRouter,Routes,route} from "react-router-dom";

function Home(){
return

Home Page

;

}

function About(){
return

About Page

}

function App(){
return(


}/>
}/>

);
}

export default App;``

Here:

• BrowserRouter manages browser navigation.
• Routes contain route definitions.
• Routes connect URL path to a component.
• element specifies which component should be displayed.

5.What is Link in React Router?
Link is used to navigate between diffrent routes without reloading the entire page.

Example:

`import {Link} from "react-router-dom";

function Navbar(){
return(

Home About

);
}
`
The to attribue specifies the destintion route.

6.What is useNavigate()?

useNavigate() is a React Router Hook component to navigate from one route to another.
_
example:_
submitting a login form,we may want to navigate to another page.

import{useNavigate} from "react-router=dom";

function Login(){
const navigate = useNavigate();

function handleLogin(){
navigate("/home");
}

return(

Login

);
}``

When button is clicked ,the user is navigated to /home.

Diffrence Between Link and useNavigate()

Link ** ** UseNavigate()
Used for navigation through a link. Used for navigation through
Javascript.
Commonly used in navigation bars. Commonly used after an action.

Uses the to prop. Uses the navigate() function.

What I Learned today

Today i learned how useContext helps avoid Props Drilling and how React Router handles navigation between diffrent pages.

I also explored BrowserRouter,Routes,Route,Link and useNavigate().