HashRouter의 location.state

location.state를 사용하면 HTML elements에 이슈가 발생한다.

history.push에 state를 정의하면 HTML element에서 기존에 렌더링 되었던 정보들이 DOM에서 사라지는 것이 아니라 display:none 속성으로 감춰지기만 합니다.

 

그래서 라우팅 할 때

A 페이지(url/a) -> B 페이지(url/a/b) -> A 페이지(url/a) -> B'페이지(url/a/b') 로 이동을 하려고 할 때

B' 페이지가 아니라 B 페이지가 출력됩니다.

 

B페이지가 보이는 이유는 B페이지가 삭제 되는게 아니라 display:none 처리만 되어 있고

B'페이지로 라우팅 할때 display:none만 해제되어 B'페이지의 componentDidMount가 불리지 않고

B페이지가 그냥 보이게 됩니다.

 

게시글 리스트화면에서 게시글 상세보기로 들어가는 경우 리스트 화면으로 다시 나올때 보통 history.goback을 쓰는 대신 이전 화면의 정보(ex 선택된 탭) 등을 history.push의 state로 넘겨주는 등으로 로직을 짤때 이러한 문제가 발생합니다.

 

location.state,reactrouter.com/web/api/HashRouter

 

ReactRouter 공식 문서를 살펴보면 HashRouter에서 location.state, location.key를 사용하면 이슈가 발생하니 해당 문법을 사용하지 말록 명시되어 있습니다.