React) NavLink

NavLink

• 현재 활성화된 라우터의 스타일을 적용하기 위한 컴포넌트

• Link의 확정 버전

• to에 지정된 path와 URL이 매칭되는 경우 스타일 or 클래스를 적용할 수 있음.
  (activeStyle, activeClassName)

import { NavLink } from 'react-router-dom'
...
const Category = styled(NavLink)`...`

const Categories = () => {
    return (
        <CategoryBlock>
            {categories.map((cg, i) => 
                <Category 
                    key={i}
                    activeClassName="active" // active: 기본값
                    exact={cg.name === 'all'} // '/' 경로일 때 exact=true
                    to={cg.name === 'all' ? '/' : `/${cg.name}`}
                    >
                    {cg.kr}
                </Category>
            )}
        </CategoryBlock>
    );
};

• 엔터테인먼트 카테고리 선택 시 /entertainment URL로 이동
• 현재 URL과 path의 값이 같으므로 actvie 클래스가 적용됨.

NavLink도 Link와 마찬가지로 to에 설정된 값으로 URL을 이동시킵니다.

만약 현재 URL과 NavLink의 to 속성이 일치하다면 기본값으로 active 클래스를 추가해주고
또는 activeClassName=" " 에 원하는 클래스 명으로 작성이 가능합니다.

Route와 마찬가지로 exact를 사용하지 않는다면 '/entertainment' 접근 시 '/'와 '/entertainment' 둘다 만족하기 때문에 '/'와 '/entertainment' 모두 active 스타일이 적용됩니다.
이를 방지하기 위해서 to 값이 '/'인 NavLink에 exact를 사용하면 다음 NavLink에는 active 스타일이 적용되지 않습니다.