Nav Link
Geçerli URL ile eşleştiğinde, render edilmiş elemente css ekleyecek bir <Link>
sürümüdür.
Navlink
kullanmak için react-router-dom
dan import edip basitçe aşağıdaki gibi kullanabiliriz.
import { NavLink } from 'react-router-dom'
<NavLink to="/about">About</NavLink>
NavLink
ile Link
aynı işi görür fakat NavLink o an sayfada aktif olan linke css kodu/class ekler.
Parametreleri
activeClassName: string
Element aktif olduğunda ona eklenecek olan sınıfı belirler. Varsayılan olarak active
sınıfı eklenir. Farklı bir class ismi kullanmak istiyorsak aşağıdaki gibi belirtebiliriz.
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
activeStyle: object
Link aktif olduğunda elemana uygulanacak stilleri obje olarak parametre alır.
<NavLink
to="/faq"
activeStyle=
>FAQs</NavLink>
exact: bool
true
olduğunda, etkin sınıf/stil yalnızca link ile eşleştiğinde uygulanır.
exact
yazmazsak NavLink
kullanıldığında örneğin /profile
linkindeyken to="/"
içeren linkte aktif görünecektir. Çünkü /profile
linki /
ifadesi içeriyor. exact
yazdığımızda içeriyor mu diye bakmak yerine eşit mi diye kontrol eder.
<NavLink
exact
to="/profile"
>Profile</NavLink>
strict: bool
true
olduğunda, konumun geçerli URL ile eşleşip eşleşmediğini belirlerken son eğik çizgiside dikkate alınacaktır.
<NavLink
strict
to="/events/"
>Events</NavLink>
isActive: func
Bağlantı etkin olduğunda fonksiyon çağırır.
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink>