React-Router: pass props from one component to another using Navlink

Question

I am using <NavLink> for routing now how can i pass props into <NavLink> to another Component

Answer 1

The way you can pass data to navigated component using Link and NavLink

<Link to={{
   pathname:'/home',
   state: {name:'from home page'}  
 }}>
  Go to Home
</Link>

or using NavLink

<NavLink to={{
   pathname:'/home',
   state: {title:'from home page'}  
 }}>
  Go to Home
</NavLink>

inside navigated component you can access like this.

if it's hooks

import {useLocation} from 'react-router-dom'

    function App(){
      let location = useLocation();
      console.log(location)
      return <h2>...</h2>
    }

if it's class based component

console.log(this.props.location)