Link
Uygulamanızın içerisinde gezinme olanağı sağlar.
HTML’deki <a href="">
tagı ile benzer mantıkta çalışır.
Link
kullanmak için react-router-dom
dan import edip basitçe aşağıdaki gibi kullanabiliriz.
import { Link } from 'react-router-dom'
<Link to="/about">About</Link>
Parametreleri
to: string
Gidilecek olan adres satırıdır.
HTML’deki <a href="">
tagının href=""
kısmı gibi düşünebiliriz. Link
componentine tıklandığında, to=""
kısmında yazılan adrese gider.
<Link to='/courses?sort=name'/>
to: object
to
parametresi objede olabilir.
Bir obje aşağıdaki özelliklerden herhangi birine sahip olabilir:
pathname
: Bağlanılacak yolu temsil eden bir string.search
: Sorgu parametrelerini temsil eden bir stringhash
: URL’i yerleştirmek için bir # ör. # Bir karması.state
: State’in bulunduğu yere devam etmesi.
<Link to={-{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}-} />
GitHub Pages süslü parantezden ({
) iki tane yan yana koyulduğunda hata verdiği için araya tire (-
) koydum, normalde kodda o tireleri yok sayın.
replace: bool
replace
parametresi true
olduğunda bağlantıya tıklarsak, linke yeni bir konum eklemek yerine geçmiş linkteki geçerli konumun yerini alacaktır.
<Link to="/courses" replace />
Normalde linkleri uç uca ekler, replace ile önceki linkin yerine geçecektir.
innerRef: function
Componentin temel ref
değerine erişime izin verir.
const refCallback = node => { }
<Link to="/" innerRef={refCallback} />
diğerleri
Ayrıca <a>
tagında olduğu gibi, örneğin bir title, id, className vb. olmak üzere parametrelere props olarak geçebiliriz.