react-router-dom v6的link标签如何下发数据答案

【问题标题】：How to deliver data on the link tag of react-router-dom v6react-router-dom v6的link标签如何下发数据
【发布时间】：2022-01-18 16:57:30
【问题描述】：

当我把state值放在react router dom的link prop里面的时候，我想在被移动的组件中使用我在执行link时放在state里面的数据，但是不知道怎么用。

console.log(location;)的时候，我想看状态值中的wordlist。

<Link
  to={{
    pathname: `/test/${wordlist[0]?.contents}`,
    state: {
      wordlist: wordlist,
    },
  }}
>
  <ColorButton>test</ColorButton>
</Link>

export default function Test(props) {
  const location = useLocation();
  console.log(location);
return()
}

【问题讨论】：

stackoverflow.com/questions/41736048/…

标签： javascript reactjs

【解决方案1】：

在 react-router v6 中，状态在 Link 组件中作为 prop 传递：

<Link
  to={`/test/${wordlist[0]?.contents}`}
  state={{ wordlist }}
>
  <ColorButton>test</ColorButton>
</Link>

【讨论】：

非常感谢