본문 바로가기

Front/React

React Cache Router

캐시 라우터란 내가 저장하길 원하는 url에 해당하는 페이지를 dom 정보에 저장해 놓고

다음페이지로 넘어가면 캐시라우팅 한 페이지를 display:none 처리해주고

캐시라우팅 한 페이지로 다시 돌아왔을때 display:none 처리되었던 페이지를 그대로 보여주는 기능이다.

따라서 캐시라우팅 한 페이지는 componentDidMount는 동작하지만 unMount 로직은 타지 않는다.

물론 필요하다면 unMount를 타도록 설정하는 것도 가능하다.

 

스크롤정보, 필터정보등 다양한 정보가 해당 페이지로 돌아왔을때 남겨져 있어야 하는 요구사항이 있을 때 사용한다.

 

하지만 캐시라우팅에서 간혹 특정한 이유로 동작하지 않는 경우가 있다.

 

1. react-router-dom의 useParams를 쓰는 경우

https://github.com/remix-run/react-router/issues/6938

 

2. routerswitch를 쓰지 않아서 cache router가 안먹히는 경우