将道具从导航链接传递到组件 React 路由器

Question

I'm trying to pass a props from my navlink to another component, but, when I make the call from the console, I get an error

Nav Link

<NavLink price={price} className="NavProjet" to={{
   pathname:"/boutique/checkout/",
   state: {
      price: {price},
     
    } }} >

Component Page

console.log("price",props.location.state.price)

Console error => Cannot read property 'state' of undefined

If someone have a solution? Thanks for time!

Answer 1

You're giving an object as a value to the state, for example:

price: {
  price: {
    prix: 'hello',
  }
}

So you would access it, as of right now, by console.log("price",props.location.state.price.prix) . I think you meant to do:

state: price

?. This would make it possible to do props.location.state.prix .

Answer 2

SOLVED !

<NavLink prix={prix} className="NavProjet" to={{
   pathname:"/boutique/checkout/",
   state: {
      prix: `${prix}`,
     
    } }} >

And Component page

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

 const location = useLocation();
  
  console.log(location.state.prix);