Aktif Linkler

Linkin adan farkı, Link etkin olduğunda farklı stil yada class tanımlayabiliriz.

Aktif Stiller

Inline css’in nasıl göründüğüne bakalım, Linklerinize activeStyle ekleyin.

// modules/App.js
<li><Link to="/about" activeStyle=>About</Link></li>
<li><Link to="/repos" activeStyle=>Repos</Link></li>

Linklerden aktif olanı kırmızı renkte görünecektir.

Aktif Class

Inline CSS’ler yerine aktif bir sınıf adı da kullanabilirsiniz.

// modules/App.js
<li><Link to="/about" activeClassName="active">About</Link></li>
<li><Link to="/repos" activeClassName="active">Repos</Link></li>

Aktif olan link active classını alacaktır. Şimdi ihtiyacımız olan css dosyamız üzerinden bu classa renk vermek.

// index.html
<link rel="stylesheet" href="index.css" />

Ve CSS dosyamızda:

// index.css
.active {
  color: green;
}

Tarayıcıyı yenileyerek test edebilirsiniz.

NavLink Kapsayıcısı

Sitenizdeki çoğu bağlantı aktif olduklarını bilmek zorunda değildir; genellikle yalnızca birincil gezinme linkleri bunu bilmek zorundadır. activeClassName veya activeStyleı her seferinde yazmak zorunda kalmamak için bunlar için bir kapsayıcı component kullanmak mantıklıdır.

Burada, üç noktalı bir spread operatör kullanacağız. activeClassNamei istediğimiz componente yazmayı sağlar.

Modules/NavLink.js konumunda şöyle yeni bir dosya oluşturun:

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>
  }
})

Şimdi ise linklerimizi NavLink ile değiştirelim.

// modules/App.js
import NavLink from './NavLink'

// ...

<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>

Burada yapılan işlem, her seferinde linke activeStyle yada activeClassName yazmak yerine, bunu halihazırda yazan bir component tanımlıyoruz. NavLink componenti bize activeClassName="active" yazan bir Link componenti return ediyor.

//bu kod yerine
<Link to="/about" activeClassName="active"/>

//bu kodu kullandık
<NavLink to="/about">About</NavLink>

Daha kısa, daha anlaşılır ve daha temiz. </i>

Sıradaki Eğitim: Parametreler