◾️ how to link with param (pathname for route and search param)
const VideoGridItem = ({id,title,thumbnails}) => {
return (
<Link to={{pathname:"detail", search:`?v=${id}`}} className={Style.item}>
<img src={thumbnails} alt={title} />
<span>{title}</span>
</Link>
)
}
◾️ parse search param id using 【useLocation】
→useLocation / URLSearchParams / get()
import React, {useEffect} from 'react'
import {useLocation} from 'react-router-dom'
const VideoDetail = () => {
const location = useLocation();
console.log("VideoDetail:", location)
useEffect( () => {
//parse search param value : detail?v=o2bXOyyGe7c
const searchParams = new URLSearchParams(location.search)
const id = searchParams.get("v")
console.log("id:", id)
}, [])
return (
<div>
</div>
)
}
export default VideoDetail