关于react router链接问题state字段名问题答案

【问题标题】：About the react router link problem state field name problem关于react router链接问题state字段名问题
【发布时间】：2022-11-22 17:59:56
【问题描述】：

这是我的代码：

<Link 
  state={{"contact":contact}}
  to="/admin/contact/Edit"
  >
  <Button variant="warning"><Pencil/></Button>
</Link>

在目的地，我可以通过以下编码获取联系人对象：

let data = useLocation();
console.log(data.state.contact);

我希望字段名称是动态的。所以，我尝试了以下编码，不幸的是在目的地，我无法获得联系人对象。

let fieldName="contact"; 
 return(
  <Link 
      state={{ fieldName:contact}}
      to="/admin/contact/Edit"
    >
    <Button variant="warning"><Pencil/></Button>
  </Link>
 );

我怎样才能让它发挥作用？

【问题讨论】：

您能否指定您的 react-router-dom 库版本？
我正在使用 6.4.2

标签： javascript react-router

【解决方案1】：

如果你的意思是属性键是动态的，那么代码看起来更像下面这样：

<Link 
  state={{ [fieldName]: contact }}
  to="/admin/contact/Edit"
>
  <Button variant="warning"><Pencil/></Button>
</Link>

fieldName 是一个动态密钥，在接收组件中将以相同的方式使用。

const { state } = useLocation();

const value = state[fieldName];

【讨论】：