Auth 컴포넌트의 Link가 제대로 작동하지 않는 문제

[hatchling13]

개요

Auth 컴포넌트의 Link가 제대로 작동하지 않는 문제를 해결한다.

Auth 컴포넌트에 대한 설명

Auth 컴포넌트의 Login 페이지에서 Link로 render된 Button을 통해 Register 또는 Reset 페이지로 갈 수 있다. 각 페이지는 다음의 path에 각각 할당되어있다.

페이지	내용
Login	auth
Register	auth/register
Reset	auth/register

문제 상황

Register/Reset 페이지에서 메인 테마의 메뉴 버튼을 누를 경우, URL의 auth/ 부분이 사라지지 않고 남아있어, 지정된 URL로 가지 못해 원하는 페이지가 render되지 않는다.

[hatchling13]

문제 원인

메인 테마의 로그인 버튼은 Auth 라는 내부 컴포넌트를 통해 render된다. 해당 컴포넌트는 다음과 같이 render된다:

1. Redux store에 관련 값이 존재할 경우, 클릭 시 logout 액션을 실행하는 Menu.Item
2. Redux store에 관련 값이 존재하지 않을 경우, to 속성 값에 해당하는 주소로 이동하는 Link 형식의 Menu.Item

이 때, to 속성 값인 주소에 선행하는 /가 없을 경우 해당 주소를 상대경로로 인식하여, 현재 경로에 to 속성 값을 추가한 URL로 이동한다.

문제 해결법

내부 컴포넌트 Auth 2번째 결과값의 to 속성값에 선행하는 /를 추가한다.