useNavigate

글로 보면 이해 안된다.

사용 ㄲ

useNavigate사용방법부터 정리하자면,

import {useNavigate} from 'react-router-dom'

const navigate = useNavigate();
//네비게이트를 사용할 변수를 먼저 선언

 const goToDetail =() => {
    navigate('/monsters/detail')
    //선언한 네비게이트에 가고싶은 url주소를 건다
  };
  
  <div className="cardContainer" onClick={goToDetail}>
  //여기서는 카드컨테이너의 온클릭이벤트에 함수를 걸어줬다

이렇게 되면! cardContainer에 클릭이 발생할때 네비게이트를 이용해 해당 페이지로 이동한다

긍데 url에 detail만 걸려있어서 어떤 것을 클릭하던 한 url로 보내줌.ㅜ

전에 카드리스트에 map을 사용해 id값을 받아 받아온 이미지를 뿌렸다.
그래서 똑같이 하면되지 않을까? 생각했는데 맞았음 뿌듯

하지만 라우트에 : parameter 로 id 를 걸어줌
pathParameter라고 한다

결과 - > 카드리스트에 카드를 선택하면 상세페이지로 이동하고
url은 id값에 맞게 페이지를 이동한다