[React] pathname 변경에 따라서 헤더 CSS 바꾸기

내가 하고 싶었던 것:

헤더에서 내가 선택한 부분의 CSS를 바꾸고 싶었다

처음에는 const page = window.location.pathname();을 사용해서 하려고 해보고 안돼서

[page, setPage]로 선언해서도 해보고 useLocation도 써봤는데

클릭 시점에 state를 변경하면 return부분 렌더링 시점과 맞지 않아서 한박자씩 늦게 변경됐다

 

아무튼 그래서 열심히 방법을 찾던 끝에 NavLink를 사용해서 완성했다. 코드는 대략 다음과 같다.

<NavLink to="/lecture" className={({ isActive }) => (isActive ? "selected" : "")}>
  <Content>📚 기초 개념</Content>
</NavLink>

 

isActive는 NavLink의 고유 속성(boolean)으로 사용할 수 있는 듯 하다. pathname 관련 속성

해당 링크로 이동하는 경우 selected라는 클래스네임이 부여되고, 해당 클래스에 css값을 설정하면 된다

 

  .selected {
    font-weight: bold;
    color: #506bb1;
  }

---

 

참고 블로그: https://velog.io/@hying/React-Route-dom-v.6-NaviLink%EB%A1%9C-%ED%98%84%EC%9E%AC-location%EC%97%90-active-css-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0