NavLink에서 "activeClassName"및 "activeStyle"을 설정하는 기능 외에도 사이트에서 탐색하지 않는 요소 (예 : 머리글 또는 바닥 글의 기본 탐색이 아님)의 다른 경로에 대한 링크를 만들 때 NavLink over Link 를 사용하는 이유가 있습니까? 활성 상태 / 클래스가 필요하지 않습니까?
React Router v4 <NavLink> 대 <Link> 이점
답변:
공식 문서는 분명하다 :
<NavLink>
<Link>현재 URL과 일치 할 때 렌더링 된 요소에 스타일 지정 속성을 추가 하는의 특수 버전입니다 .
따라서 대답은 NO 입니다. 언급 된 것 외에 다른 이유는 없습니다.
링크 구성 요소
다른 URL을 탐색 할 수있는 링크를 만드는 데 사용되며 특정 링크 중 하나를 클릭하면 페이지를 다시로드하지 않고 해당 경로와 연결된 페이지를로드해야합니다. 예:
NavLink 구성 요소 :
링크에 몇 가지 스타일 을 추가하려는 경우 . 특정 링크를 클릭하면 어떤 링크가 활성화되어 있는지 쉽게 식별 할 수 있습니다. 이를 위해 라우터가 제공하는 반응 NavLink 대신 링크 . 이제 Navlink 에서 Link를 대체 하고 activeStyle 속성을 추가합니다 . activeStyle의 특성은 우리가 링크를 클릭하면 우리가 현재 활성화 된 링크를 구별 할 수 있도록, 그것은 다른 스타일로 강조해야 의미한다. 예:
간단히 말해, 사용하면 선택한 요소에 활성 클래스 <Link>가 없습니다 .
반대로이 요소가 활성 클래스에 추가 되었기 때문에 선택한 요소가 강조 표시됩니다.
당신에게 도움이되기를 바랍니다.<NavLink>
일부 코드 샘플은 사용자에게 도움이 될 것입니다. 리뷰에서
—
Vaibhav Vishal
NavLink접근성을 위해 페이지에 적절한 초점을 유지합니다. 링크를 사용할 때 페이지로드시 초기 포커스가 손실되고을 사용할 때 드롭 다운을 통한 탭도 중단되는 것을 알 수Link있습니다. NavLink는이를 수정합니다.