使用 Link 元素和来自 React 路由器的 useLocation 挂钩时访问道具

Question

我正在尝试将 props 发送到使用来自 React 路由器的 <Link> 标记呈现的子组件。我这样做：

• 这就是我在父组件中使用 Link 元素的方式（用 useRouter 挂钩包装，但不知道是否必须这样做）：

[...]
<Link
  to={{
    pathname: `/Element/${id}`,
    state: {
      info: "foo",
    },
  }}
>
  {title}
</Link>;
[...]

• 这是接收该信息的组件：

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

const Element = () => {
  const data = useLocation();
  console.log(data)

  return (...);
};

这将返回一个带有键 state: undefined

的对象

我在这里错过了什么？提前致谢

Answer 1

我终于找到了，我需要用 withRouter 钩子

包装两个组件