[React-Router] useLocation과 useParams

경로에 대한 여러 정보를 가지고 있는 useLocation() 

Location : 위치, 장소

useLocation은 경로에 대한 정보를 가지고 있습니다.

이 정보들은 무엇이 있는지 살펴보겠습니다.

아래는 '/products/Women' 라는 경로로 이동했을 때 useLocation()의 값입니다.

• pathname : 현재 URL의 경로
• search : 현재 URL의 쿼리 부분
• hash : 현재 URL의 해시 부분
• state : 페이지 전환시 전달된 상태, <Link> 와 useNavigation()으로 state를 전달할 수 있습니다.
             

사용법

Link.jsx : 페이지를 이동시키는 버튼 컴포넌트

<Link to='/products/Women' state='Women'> Women </Link>

 

Products.jsx : 페이지 이동시 데이터를 받는 컴포넌트

const data = useLocation(); // 경로에 대한 정보

동적 라우트의 매개변수를 가지고 있는 useParams()

Parmas : 파라미터

useParams는 파라미터에 대한 정보를 가지고 있습니다.

공통점 / 차이점

<Link>와 useNavigation으로 페이지 이동을 했다면 useLocation()에서 state를 가져올 수 있습니다.

router를 통해 페이지 이동을 했다면 useParams()와 useLocation()에서 state를 가져올 수 있습니다.

단 직접 URL을 입력했을 때 useParams()에서는 그 url 정보를 받을 수 있지만 useLocation()은 state를 갖기 때문에 url에 입력된 값을 가져올 수 없습니다.