React

Link, NavLink, useNavigate, useParams

Hyunsoo_Kim 2024. 1. 14. 23:35

Link

지정한 경로로 페이지를 이동시켜주는 컴포넌트

 

- to 속성으로 지정한 경로를 이동시켜 준다.

- Link 컴포넌트에선 "href" 대신 "to"를 사용한다.

- 이동할 경로의 앞에 /를 사용하면 절대경로, /를 사용하지 않으면 상대경로.

 


NavLink

 

- 현재 URL과 to가 가리키는 링크가 일치할 때 , activeStyle과 activeClassName이 활성화 되고, 일치하지 않으면 비활성화 된다.

 

- activeStyle을 사용하여 위 코드와 같은 기능을 하도록 만들었다.

 


useNavigate

 

- 지정한 경로로 이동시켜주는 훅.

- 인자로 들어가는 문자열에 /를 빼면 상대경로, /를 사용하면 절대경로