Closed anonymousRecords closed 2 months ago
기존 코드를 보면 아래와 같다.
const searchParams = usePathname();
...
<Link
key={element.name}
href={element.url}
className={`${searchParams === element.url ? "text-[#FFBF00]" : "text-white"}`}
>
usePathname을 사용해서 현재 url의 pathname을 가져왔다. 그리고 element.url 즉, constant로 미리 정의한 "/posts", "/events" 등과 일치한지 확인을 한 후, 만약 일치하다면 하얀색이 아닌 다른 글자색을 지정하였다.
페이지 이동까지는 괜찮았지만,
포스트 페이지를 예로 들자면 포스트 상세 페이지로 이동할 경우 url이 '/posts/1' 이런 식으로 변경되기 때문에
searchParams === element.url
이 false가 되어 사실상 posts 페이지에 있음에도, 지정한 글자색이 보이지 않는 이슈가 발생하였다.
내가 생각해 낸 방법은, 상세 페이지로 넘어가더라도 navElement의 name은 계속 url에 노출된다. 다시 말해 posts페이지에서 아무리 상세 포스트로 넘어가더라도 url 주소에 posts는 남아있는 것이다. 따라서 url에 주소에 navElement의 name이 있는지 확인하고자 하였다.
const isActive = (name: string) => {
// "/" 경로는 예외 처리
if (name === "home" && pathname === "/") {
return true;
}
return pathname.includes(name);
};
pathname.includes(name)
를 통해 navElement의 name이 있으면 true를 반환하게 하였다.
또한 home의 경우, 주소가 '/'이기 때문에 별도로 코드를 추가하여 상황을 처리하였다.
📌 문제 상황
https://github.com/najakgil/najakgil-tech/assets/97885933/07a22574-c2ce-46f1-be34-ed7e16186bc0
현재 usePathname()를 사용하여
searchParams === element.url
일 경우,특정 Navbar element 색상을 다르게 표시함.
하지만 상세 게시물 화면으로 넘어갈 경우, Navbar element 색상이 제대로 표시되지 않음.