React 如何实现点击图片后进入图片详情页

我调用API获取到所有图片后渲染到页面上,之后我想点击某个图片就可以跳转到一个新的页面,那个页面上包含被点击图片的某些属性,如src,id,name等等。

以下是部分代码,请问该如何修改handleClick方法呢?

//调用API后将图片渲染到页面上
function CustomContent() {
    const [customContent, setCustomContentResults] = useState([])

    const fetchData = async() => {...}

    useEffect(...)

    const handleClick=(post)=>{
     
    }
    const content = customContent?.map(post => {
        return <li key={post.id}>
                <div>
                    <img alt="" src={post.src.medium} onClick={() => handleClick(post)}></img>
                </div>
            </li>
    })
    return (
        <div >
            <ul>
                {content}
            </ul>
        </div>
    )
}

export default CustomContent


```javascript
const handleClick=(post)=>{
     const {src, id, name} = post;
    window.location.href = `http://m.tb.com?id=${id}&name=${name}&src=${src}`;
 }
不过src那里最好编码一下


```

那你首先 路由就得配置一下 ,然后 用编程式导航跳转。 ptath:"/detail/:id"
https://blog.csdn.net/weixin_44058725/article/details/126622767
https://blog.csdn.net/qq_44718039/article/details/126162877