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-domdan 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 string
• hash: 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.

Sıradaki Gelişmiş Kılavuz: Nav Link