[TIL]2023.07.19 특정 page에서 header 혹은 footer 숨기기 🥷🏻

Nick·2023년 7월 19일
0

TIL: 오늘을 돌아보자

목록 보기
50/95
post-thumbnail
post-custom-banner

간폭 페이지에서 필요 없는 컴퍼넌트를 숨기고 싶다면 ...?

숨기는 방법

아래와 같은 상황

모든 Route path 경로 페이지들은 헤더와 푸터를 갖고 있다!

푸터에서 숨시고 싶은 경로를 입력하여 return null 값을 주자 !
물론 원하는 컴포넌트 모두가 적용 가능하다!

이슈

NotFoundPage 에서 footer 를 숨기려고 했으나 숨겨지지 않음

원인

와일드카드 문자로 이루어진 경로 에서는 적용되지 않는 문제

해결방법

방법1

2가지 Layout component 생성

  • header, footer 둘다 포함하고 있는 Layout
  • header만 가지고 있는 Layout -> 404page에 적용

방법2

path ="" 주소를 배열로 만들어 사용
조건식을 사용하여 404page에는 적용되지 않게 만들기 -> 비효율적이어 보임

profile
배우고 도전하는것을 멈추지 않는 개발자 입니다.
post-custom-banner

1개의 댓글

comment-user-thumbnail
2023년 7월 19일

소중한 정보 감사드립니다!

답글 달기