pass data from page via Link

Author: nishkohli96

src/components/misc/NestedRoutes.jsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { Link, Route, useParams, useRouteMatch } from 'react-router-dom';
+import {
+    Link,
+    Route,
+    useParams,
+    useRouteMatch,
+    useLocation,
+} from 'react-router-dom';
 
 const Item = () => {
     const { name } = useParams();
@@ -13,10 +19,15 @@ const Item = () => {
 
 const NestedRoutes = () => {
     const { url, path } = useRouteMatch();
+    const location = useLocation();
     console.log(useRouteMatch());
 
     return (
         <div>
+            <p> Getting Data from the Link of Prev Page</p>
+            <p>Name: {location.state.name}</p>
+            <p>Msg: {location.state.msg}</p>
+
             <ul>
                 <li>
                     <Link to={`${url}/shoes`}>Shoes</Link>
@@ -28,7 +39,7 @@ const NestedRoutes = () => {
                     <Link to={`${url}/footwear`}>Footwear</Link>
                 </li>
             </ul>
-            
+
             <Route path={`${path}/:name`}>
                 <Item />
             </Route>

src/components/misc/PageLinks.jsx

@@ -4,17 +4,17 @@ import { Link } from 'react-router-dom';
 const PageLinks = () => {
     return (
         <>
+            <Link to="/ui">UI</Link>
+
             <Link
                 to={{
-                    pathname: '/ui',
-                    data: { name: 'nish', msg: 'Hi people' },
+                    pathname: '/nested',
+                    state: { name: 'nish', msg: 'Hi people' },
                 }}
             >
-                Send data to route
+                Nested Routes
             </Link>
 
-            <Link to="/nested">Nested Routes</Link>
-
             <Link
                 to={{
                     pathname: '/rhform',
@@ -46,7 +46,7 @@ const PageLinks = () => {
             >
                 Check Graphql fetch
             </Link>
-            
+
             <Link
                 to={{
                     pathname: '/casl',