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

【问题标题】：Passing props from a navlink to a component React Router将道具从导航链接传递到组件 React 路由器
【发布时间】：2021-06-09 12:46:07
【问题描述】：

我正在尝试将一个道具从我的导航链接传递到另一个组件，但是，当我从控制台进行调用时，我得到一个错误

导航链接

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

组件页面

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

控制台错误 => 无法读取未定义的属性“状态”

如果有人有解决方案？感谢您的时间！

【问题讨论】：

【解决方案1】：

解决了！

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

组件页面

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

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

【讨论】：

如果您的“组件页面”是来自'/boutique/checkout/' 路径的路由组件，您将已经在组件的道具中收到该位置，因此您不必使用useLocation() .您可以通过props.location 访问该位置。

【解决方案2】：

你将一个对象作为一个值赋予状态，例如：

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

所以您现在可以通过console.log("price",props.location.state.price.prix) 访问它。我想你打算这样做：

state: price

?。这将使props.location.state.prix 成为可能。

【讨论】：