210821 개발기록: 사이드프로젝트 트러블슈팅 기록

React router 처리를 하기 위해 Link 태그를 사용했다.

그런데 아래 코드에서 명시한대로 /resultpage 주소로 리다이렉션 될 거라 생각했는데, url 에 변경이 없었다.

 

 

🌿  첫번째 케이스의 이유는

div 태그에서 선언한 onClick() 에 있었다.

라우팅 처리가 되기 이전에, onClick() 함수를 먼저 타버리면서 로직이 실행됐다.

그렇기 때문에 원하는 방향으로 라우팅 처리가 이뤄지지 않았다.

<Link to="/resultpage">
    <div className="answers_wrap" onClick={(e) => ToNextStep(e)}>
        {answerB}
    </div>
</Link>

 

🌿  두번째 케이스의 이유는

클릭하는 위치의 문제였다.

<div className="answers_wrap" onClick={(e) => ToNextStep(e)}>
	<Link to="/resultpage" style={{"textDecoration": "none", "color": "black"}}>
		{answerA}
	</Link>
</div>

주황색 하이라이트 부분은 Link 태그의 영역이고, 그 바깥 부분은 div 에 해당 (Link 에 해당되지 않는) 되는 부분이다.

개발 의도는 버튼을 누르면 router 처리를 하는 것이었지만,

주황색 영역이 버튼 전체를 포함하지 못하니 예상치 못한 에러(=라우팅 처리 X)가 계속 발생하는 것이었다.  

 

내일 다시 개발할 때 위 문제를 해결해봐야겠다.