How to pass data between different routes in React | useNavigate and useLocation Hook

Here are the steps we will follow to pass data between different routes in React using React Router.

1️⃣ Step 1: Create a navigate() function using by useNavigate() hook from React router. In the navigate() function pass the first function as the first parameter and as the second parameter pass an object as "state" and inside that store the data that you want to pass.

2️⃣ Step 2: In another route extract the "state" object from the useLocation() hook. Now you can extract the properties from the state object and use the values.

Note: useLocation() and useNavigate() is has been introduced in React router package V6. So make sure you are using version 6 of React router package to use these hooks.

🌟Contents of this video 🌟
0:00 - Example
1:17 - Code Walk through
3:47 - useNavigate() hook
07:50 - useLocation() hook
09:48 - Overview of the solution

🎓 Topics covered include:
✅ Sharing data across routes
✅ React router