react link param and parse

◾️ 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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です