[실전 프로젝트] withRouter(from. react-router-dom) 사용하여 url에 따라 Header 스타일 변경하기

withRouter(from. react-router-dom)이란?

• 개념
  : withRouter 함수는 Higher-order Component로써 라우터(Router)에 의해서 호출된 컴포넌트가 아니어도 match, location, history 객체에 접근 할 수 있도록 해주는 함수입니다!
  (참고로 history는 match, location과 함께 전달되는 properties 중 하나로 페이지 이탈을 방지 할 때 사용합니다.)
• 예시
  - 라우팅을 하는 컴포넌트가 있고, 그 라우팅된 컴포넌트에서 다른 컴포넌트를 사용 할 때 사용합니다.
  - 예를 들면 도시의 목록이 있고, 그 도시 목록을 눌렀을 때 아래 다른 컴포넌트가 표시될 필요가 있을 때!
  - 검색된 결과를 받았을 때 그 결과로 화면에 뿌려야 하는 데 다른 컴포넌트에도 쿼리가 필요 할 때
• 사용법
  - react-router-dom 패키지를 설치 합니다.
  - 컴포넌트 상단에 import {withRouter} from "react-router-dom";를 써서 withRouter를 import 합니다.
  - withRouter는 다른 컴포넌트를 감싸는 컴포넌트 이기 때문에 아래와 같이 사용합니다.

  export default withRouter((props) => {
  	console.log(props);
      <p>컴포넌트</p>
  } // return 하는 컴포넌트를 감싼다.​

  
  

 

사용 과정

1. App.js에 Header와 Navigation이 기본으로 있고 Header와 Navigation 중간에 Container를 잡아서 페이지가 이동 할 때마다 화면이 바뀌도록 구현 하였다.

2. 플레이 리스트가 추가 되면서 asmr 페이지에 갔을 때는 Header의 아이콘이 바뀌도록 수정 해야 했다.

3. header는 Route로 history가 찍히지 않기 때문에 방법을 모색 하던 중 withRouter를 알 게 되었다.

4. withRouter(from. react-router-dom)을 사용하여 history.location.pathname을 가져오고, 해당 pathname에 따라 icon을 다르게 출력 하도록 수정했다.

 

참고한 사이트

https://doubly12f.tistory.com/119

[React] WithRouter 언제 사용? 사용하는 방법 (+ 코드예제)

https://ooyuolog.tistory.com/68

[React] 현재 위치 url에 따라 Header에 다른 효과를 주는 방법

https://dev-elena-k.tistory.com/43?category=1150164 

3-6. 현재 위치에 특정 스타일 넣기 (withRouter 사용하기)