[React] Link 사용 시 주의 : 감싸놓은 태그의 함수 실행 ❌, button 을 Link 로 사용

 

 

🥵 팀 프로젝트를 하다 알게 된 Link 문제점..!

 

 

btn 을 클릭했을 때나 엔터를 눌렀을 때 form 태그에 걸어둔 함수가 실행되고,

Link(btn) 을 클릭하면 페이지가 이동되도록 했는데!

 

Link 가 먼저 실행되어 form 에 걸어둔 함수가 실행되지 않았다.

그래서 반대로도 감싸보고 했지만..

❗️ Link 에 onClick 도 넣어봤는데 그럼 페이지 이동이 되지 않는다.

 

 

결국 Link 는 지우고,

실행 할 함수에 마지막에 navigate 를 써서 페이지 이동을 하게 했다!

 

➕ 버튼 태그를 Link 처럼 사용하기 : 링크 컴포넌트이지만 모양만 버튼

<button type="button" as={Link}>clink me</button>