리액트 라우터 v4와 이점 비교

리액트 라우터 v4와 이점 비교

NavLink에서 "activeClassName" 및 "activeStyle"을 설정할 수 있는 기능 외에 사이트의 비네비게이션 요소(헤더 또는 바닥글의 메인 네비게이션이 아님)에 다른 경로로 링크를 작성할 때 NavLink over Link를 사용해야 하는 이유가 있습니까?

공식 문서는 명확합니다.

<NavLink>

의 특별한 버전<Link>현재 URL과 일치할 때 렌더링된 요소에 스타일 속성을 추가합니다.

따라서 대답은 NO입니다.그 외에 다른 이유는 없습니다.

활성에서 스타일 또는 클래스 속성을 사용해야 하는 경우<Link>, 를 사용할 수 있습니다.<NavLink>

예를 들어 보겠습니다.

링크

<Link to="/">Home</Link>

NavLink

<NavLink to="/" activeClassName="active">Home</NavLink>

링크 컴포넌트

다른 URL을 네비게이트 할 수 있는 링크를 작성하기 위해 사용합니다.이 링크를 클릭하면 페이지를 새로고침하지 않고 해당 경로에 관련되어 있는 페이지가 로드됩니다.예:

NavLink 컴포넌트:

링크에 몇 가지 스타일을 추가할 수 있습니다.따라서 특정 링크를 클릭하면 활성화되어 있는 링크를 쉽게 식별할 수 있습니다.이 리액트 라우터는 링크 대신 NavLink를 제공합니다.이제 Navlink에서 Link를 바꾸고 속성을 activeStyle로 추가합니다.activeStyle 속성은 링크를 클릭하면 현재 활성 상태인 링크를 구분할 수 있도록 다른 스타일로 강조 표시되어야 함을 의미합니다.예:

참고 자료: https://www.javatpoint.com/react-router

간단히 말하면,<Link>선택한 요소에 활성 클래스가 없습니다.
이와는 대조적으로<NavLink>선택한 요소는 활성 클래스가 추가되기 때문에 강조 표시됩니다.
도움이 되길 바랍니다.

v6를 추가하기 위해서NavLink추가하다.active에의 클래스a추가 코드 없이 태그를 지정합니다.

<NavLink to="/">Link 1</Link>
<NavLink to="/link2">Link 2</Link>

다음과 같이 렌더링합니다.

<a href="/" className='active'>Link 1</Link>
<a href="/link2">Link 2</Link>

사용자가 홈 URL(https://localhost:3000)에 있는 경우

v6.0.0-beta.3의 한 가지 차이점은 activeClassName과 activeStyle이 NavLinkProps에서 삭제되었다는 것입니다.대신 구성 요소의 활성 상태에 따라 인라인 스타일 또는 클래스 문자열을 사용자 정의할 수 있는 함수를 스타일 또는 className에 전달할 수 있습니다.또한 활성 상태에 따라 구성요소의 내용을 사용자 정의하는 기능을 하위 항목으로 전달할 수 있으며, 내부 요소의 스타일을 변경하는 데 특히 유용합니다.

NavLink는 링크를 활성화로 강조 표시할 때 사용됩니다.따라서 페이지에 대한 라우팅마다 activeClassName에 따라 링크가 강조 표시됩니다.링크는 강조 표시가 필요 없는 링크용입니다.

언급URL : https://stackoverflow.com/questions/47338077/react-router-v4-navlink-vs-link-benefits