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

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)

Answer 2

On the first component do this
<NavLink
to={{
pathname:"/priview-data",
aboutProps:{
selectedidds:this.state.selectedIds
}
}}
exact
>Preview Question
</NavLink>
and now on another component
constructor(props) {
super(props);
console.log(props.location.aboutProps);
}
hope it helps
Thanks

Answer 3

You can also use hooks to pass props:
<Link
to={{
pathname: "/home",
userProps: {name: "This is a passed prop"},
}}>
Go to home
</Link>
To access it from another component
import { useLocation} from "react-router-dom"
function OtherComponent() {
let location = useLocation();
console.log(location.userProps);
}

Answer 4

<NavLink to="/onboarding/profile" state={{ from: "occupation" }}>
Next Step
</NavLink>
Now the only question that remains is, how do we get access to the data on state so we can update the UI based on it? To answer that, we need to look at the component that's being rendered at the /onboarding/profile route. For our example, let's call it Profile.
import { useLocation } from 'react-router-dom'
function Profile () {
let location = useLocation();
console.log(location.state.from);
return (
...
)
}