Aktif Linkler
Link
in a
dan farkı, Link etkin olduğunda farklı stil yada class tanımlayabiliriz.
Aktif Stiller
Inline css’in nasıl göründüğüne bakalım, Link
lerinize 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. activeClassName
i 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>