2024.02.13 TIL

NavLink isActive 스타일 적용 문제

• 문제: 헤더 부분에서 Navlink를 사용하여 활성 상태에 따라 스타일을 적용하려 했으나, 현재 페이지의 URL이 NavLink의 to값과 일치함에도 isActive의 상태에 따라 지정한 스타일이 올바르게 작동되지 않는 문제가 발생했습니다.
• 시도:
  1. isActive props를 넘겨줄 때 path 비교 로직 추가하기$isActive prop을 받아와서 isActive 상태로 스타일을 제어하려고 했으나, opacity가 계속해서 100%로 적용되었습니다.이 경우 useLocation으로 path를 받아와서 NavLink isActive props에 현재 path와 비교하는 로직을 추가하여 해결할 수 있었습니다.
  2. $isActive={pathName==='/경로'}
  3. opacity: ${(props) => props.$isActive ? '100%' : '50%'};
  4. 클래스 선택자 사용하기

     &.active {
         opacity: 100%;
       }

  5. props를 넘겨받는 방식이 아닌 .active 클래스 선택자를 사용하여 스타일을 변경하도록 하니 정상 작동하였습니다.
• 해결방안: Navlink에 $isActive prop을 넘겨주는 대신에 &.active 선택자를 사용하여 스타일을 지정하는 방법으로 문제를 해결했습니다. Navlink가 활성 상태일 때 자동으로 '.active' 클래스를 부여하므로, isActive prop을 따로 제어할 필요가 없었습니다. 이 방법을 통해 active 상태에 따라 스타일을 지정할 수 있었습니다.

 

 

<StNavLink to='/' $isActive onClick={handleHomeButtonClick}>Home</StNavLink>
<StNavLink to='/myarticle' $isActive onClick={handleMyBlogButtonClick}>My Blog</StNavLink>

이렇게 했는데 

 

opacity: ${(props) =>
    props.$isActive ? '100%' : '50%'};

적용이 안됨.

Navlink는 현재 페이지의 URL이 to prop의 값과 일치할 때 acitve가 true가 되는 것이 맞는데, home에서도 myblog 페이지에서도 isActive가 true로 되어있었다.

navlink를 styled해서 사용했기 때문일까..?

이 경우 useLocation으로 path를 받아와서 isActive프롭스에 현재 path와 비교하는 로직을 같이 써주면 해결이 되었다.

$isActive={pathName==='/경로'}

그런데 더 간단한 방법으로도 해결할 수 있었다.

 

그래서 isActive를 props로 주는 것이 아닌

그냥 클래스 선택자인 &.active를 이용해서 스타일을 지정하니 해결되었다.

 

참고한 글

velog

 

번외) react-router-dom의 Link를 styled-components로 꾸미기(feat.useLocation) (하지만 난 NavLink가 좋다)

 

그런데 또 문제가 발생했다.

로그인 상태에 따라 link의 value값이 달라져야 하는데, ex) 로그인안했을 때는 마이페이지로 못 넘어가게

어떻게 컨트롤을 해야할지 모르겠다가

그냥 컴포넌트 조건부 렌더링으로 처리했다.

const handleMyBlogButtonClick = () => {
    if (isLoggedIn) {
      alert("로그인 후 사용 가능합니다.")
      setIsOpen(!isOpen)
    }
  }

{isLoggedIn
          ? <StHeaderBtn onClick={handleMyBlogButtonClick}>My Blog</StHeaderBtn>
          : <StNavLink to='/myarticle'>My Blog</StNavLink>
        }

로그인 안 된 상태면 버튼으로 렌더링되어 onClick으로 로그인해야함을 알려주게 하고

로그인 된 상태면 NavLink를 렌더링해서 그대로 link타고 넘어가도록 했다.