當我使用點擊導航時，如何將我的 id 傳遞給文件 SinglePost

Question

點擊發生的地方：

<img onClick={() => {navigate("/single")}} className="postImages" src={post.img_url} alt={post.title} />

這是孔組件：

Answer 1

您可以將其作為狀態傳遞（我假設post有一個id字段，如果不是，請隨意更改它）：

<img
  onClick={() => navigate("/single", { state: { id: post.id } })}
  className="postImages"
  src={post.img_url}
  alt={post.title}
/>

並借助 React Router Dom 的useLocation在SinglePost中獲取它：

// import the hook at the top of the component
import {useLocation} from "react-router-dom";

// use it inside the component
const { state } = useLocation();
console.log(state.id);