react-router-dom에서는 기존 HTML의 a 태그를 Link 컴포넌트로 바꾸어 제공하고 있다. a 태그와 사용법은 흡사한데, url 주소를 작성하는 속성이 href에서 to로 바뀌었다는 점만 기억하면 사용 방법은 거의 동일하다.

• a 태그와 Link 컴포넌트와의 차이점은 나중에 더 알아볼 것!

프로젝트의 상단 메뉴바 UI를 구현한 뒤, 각 버튼에 페이지를 이동하기 위해 Link 컴포넌트를 사용하여 url 주소를 입력하였다. 그런데 주소에 오타가 있는 것도 아니었는데 이상한 url로 이동되는 문제가 발생하였다.

<Link to='store/mypage'>
	마이페이지                                
</Link>

현재 url은 /store, 마이 페이지의 url은 /store/mypage로 설정해두었으니 그 곳으로 이동하도록 구현한 것인데..

/store/store/mypage

기존 url이 사라지지않고 그대로 남아있고, Link에 작성한 url이 그냥 더해져버렸다! 다른 버튼도 확인해봤는데, 이상하게도 어떤 버튼은 정상적으로 이동하는데 어떤 버튼은 위와 같은 현상이 발생하고 있었다.

1. 아하..

다행스럽게도 해결방법은 금방 찾을 수 있었다. 각 버튼의 Link 컴포넌트 to 속성을 살펴본 결과 정상 동작하는 버튼은..

/store/mypage

로 되어 있었고, 이상이 생긴 버튼은..

store/mypage

라고 되어 있었다. url 작성시 / 존재 유무에 따라서 Link 컴포넌트가 url을 변경하는 방식이 달랐던 것이다.

이것도 아마 CSS 등지에서 파일 경로를 작성할 때 절대경로와 상대경로의 차이점과 사용 방법에 관련된 문제같은데, 당장 눈앞에 벌어진 오류는 해결했지만 경로 문제에 대해서는 나중에 더 알아봐야 할 것 같다.