[React] GNB 현재 위치 표시-추가

▶︎ 목표

pathname이 일치하면 GNB tab color 유지하기

🧗🏻‍♀️ 문제

전 글에서 보다시피 GNB에 따른 페이지 이동 시, color 변경은 해결되었지만 문제가 있었다.
예를 들어 검색페이지가 있고, 검색결과페이지가 있다면 이 둘 모두 GNB에 있는 검색탭이 변동없이 color가 유지가 되어야 하는 것이다.
그런데 pathName === '/search' 이렇게 조건을 걸었기 때문에 search 뒤에 '/search/searchword 처럼 query가 있다면 검색탭의 색깔이 유지되지 않는다.

💡 해결

🔺 split 적용

  const pathName = useRouter().pathname;
  const pathRoute = pathName.split("/")[1];
	<Link href="/search">
      <a>
		{pathRoute === "search" ? <Image src={search} /> : <Image src={search2} /> }
      </a>
	</Link>

해결완료!
상기 pathName 콘솔로 찍으면 url의 도메인을 제외한 pathName들이 찍힌다.
/search/[searchword]
우리에게 필요한 건 첫번째 pathname 이기 때문에 / 기준으로 split을 하고, 1번째인 값을 변수에 담아 그 값이 일치하면 GNB color 값이 유지되는 것이다.!