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-domdan 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>

Sıradaki Gelişmiş Kılavuz: Memory Router