react-router-dom

react-router에서 자주 사용했던 함수들을 정리,

 

 

useParams()

path: '/videos/:keyword '

path 값의 페이지에서 param 값을 가져올 수 있다.

import { useParams } from "react-router-dom";
const { keyword } = useParams();

 

useNavigate()

onclick={() => navigate(`/videos/watch/${video.id}`)} 

window.location 과 vue의 router.push 로 생각해주면 되겠다.

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

 

useLocation()

onClick={() => navigate(`/videos/watch/${video.id}`, { state: { video } }) }

useNavigate로 페이지가 랜딩 됐을 때 넘겨준 이전 페이지에서 값을 받아올 수 있다.

navigate의 두번째 인자 값에 { state: { key: value } } 로 넘겨주면 된다.

위에서는 key, value 값을 동일하게 전달했었기 때문에 축약해서 전달이 가능했다.

 

전달 받은 페이지에서 useLocation 으로 값을 받아올 수 있다.

import { useLocation } from "react-router-dom";
const {
  state: { video },
} = useLocation();