[Next.js] Router에 접근해 컬러 Dynamic하게 변경하기, useRouter 와 Link

bbio3o·2021년 1월 18일
0

Next.js

목록 보기
2/3
post-thumbnail

Next.js로 프로젝트 하던 도중 헤더의 폰트 컬러를 페이지에 따라서 다이나믹 하게 변경하고 싶었다.


✨ 문제해결

useRouter hook을 next/router로 import 해주고
Link도 routes간의 클라이언트 사이드 화면 전환을 위해 import를 해준다.
router를 변수 선언해주어 pathname에 접근할 수 있다.

const router = useRouter(); 

  const navStyle = {
    color: router.pathname !== '/' ? 'black' : 'white',
  };

navStyle을 통해서 스타일을 변경해주는데,
index.js화면('/')에서는 폰트컬러가 'black'이 되고, 나머지 페이지에서는 'white'가 된다.
navStyle을 위의 이미지와 같이 style로 지정해주면 컬러가 페이지에 따라 다이나믹하게 변경되는 것을 확인 할 수 있다.


👩‍💻 실행화면

next.js Link 참조
next.js useRouter 참조

profile
그림도 그리는 개발자 🎨👩‍💻

0개의 댓글