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(…
On the 28th day of my React learning journey, I delved into the useContext hook, React Router, BrowserRouter, and useNavigate. The useContext component facilitates data sharing across components without the need for prop drilling. An example of its usage is shown below:
```javascript
import {createContext,useContext} from react;
const UserContext = createContext();
function App(){
return (
);
}
function Profile(){
const user = useContext(UserContext);
return <div>Welcome{user}</div>;
}
export default App;
```
React Router is a library that manages navigation between different routes in a React application. For instance, an application may have a home page, about page, contact page, and login page. React Router determines which component to display based on the current URL.
BrowserRouter is a router component that utilizes the browser's history API to manage navigation. It allows the use of conventional URLs such as: /home, /aboutus, and /contact. An example of its implementation is shown below:
```javascript
import {BrowserRouter} from react-router-dom;
function App(){
return (
// Routes will be placed here
);
}
export default App;
```
A route in React Router connects a URL path with a specific React component. For example:
```javascript
import {BrowserRouter,Routes,Route} from react-router-dom;
function Home(){
return <div>Home Page</div>;
}
function About(){
return <div>About Page</div>;
}
function App(){
return (
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/about" element={<About/>} />
</Routes>
);
}
export default App;
```
Link is used to navigate between different routes without reloading the entire page. For example:
```javascript
import {Link} from react-router-dom;
function Navbar(){
return (
<nav>
<Link to="/home">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}
```
The useNavigate() hook is a React Router component used to navigate between routes programmatically. For instance, when submitting a login form, navigating to another page may be necessary. An example of its usage is shown below:
```javascript
import {useNavigate} from react-router-dom;
function Login(){
const navigate = useNavigate();
function handleLogin(){
navigate('/home');
}
return (
<button onClick={handleLogin}>Login</button>
);
}
```
In this scenario, clicking the "Login" button navigates the user to the /home route. The difference between Link and useNavigate() is that Link is used for navigation through a link, typically in navigation bars, while useNavigate() is utilized for navigation through JavaScript, commonly after an action.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
