Sıfırdan ileriye ReactJs yeni bir konusuna hoş geldiniz. Uzun bir aradan sonra en son React-Router ile yönlendirme işlemleri yapıyorduk. Bu konuda React-Router için değineceğim tek bir şey kaldı o da bir hook olan useParams hook olacaktır. Kısaca bu konu çok fazla bir şeye değinmeyeceğiz useParams öğrenip yönlendirme işlemlerini bitireceğiz.
useParams() Nedir ?
useParams() url içinde gönderilen bilgiye ulaşılması için kullanılır. Örneğin url adresindeki bir id değerini arayüzde göstermek olabilir. Şimdi tanım biraz kafa karıştırmış olabilir o yüzden pratiğe geçiyoruz. Hatırlarsanız kendimize ait sayfa yapmıştık butona basınca aktif oluyordu. Buralarda küçük değişiklikler yapacağız. Mesela uyeBilgileri linkine bir nick ve yas değeri atayıp bu değerleri useParams ile alıp sayfamızda görüntüleyelim.
App.js ile yönlendirme yapıyorduk bu yüzden buraya useEffect kullanalım ileride lazım olacak. Daha sonra iki adet useState biri kullaniciAdi boş bir string değeri olacak diğeri ise yas null olarak atayabiliriz. Çünkü yaş değeri number olacak.
App.js ile yönlendirme yapıyorduk bu yüzden buraya useEffect kullanalım ileride lazım olacak. Daha sonra iki adet useState biri kullaniciAdi boş bir string değeri olacak diğeri ise yas null olarak atayabiliriz. Çünkü yaş değeri number olacak.
JavaScript:
import { useEffect } from "react";
JavaScript:
const [kullaniciAdi, setKullaniciAdi] = useState(""); const [yas, setYas] = useState(null);Daha sonra useEffect içine if ile kullanıcının aktif olup olmadığını kontrol ediyoruz kullaniciDurum adında bir statemiz vardı zaten bunu kontrol etseniz yeterli. Adı ve yaşı alacak değişkenler tanımlayıp window.prompt ile bu değerleri kullanıcıdan alıyoruz. Yaş değerini alırken dikkat parseInt parantezleri içinde alınız değeri çünkü yaş değeri numberdir. İlk veriyi alırken değer bize String olarak geliyor.
İlk başta oluşturduğumuz değerleri, aldığımız değerlere set edip useState hooksunu kullanıyoruz. Artık alınan değerler hooks içinde. Son olarak ise parantezler içinde kullaniciDurum yazıyoruz çünkü hala useEffect içindeyiz. useEffect ile bu işlemin bir kez olmasını sağlıyoruz aksi takdirde sayfa hep render olacak ve işlem yapamadan hep kullanıcı adı ve yaş değerleri istenecek.
JavaScript:
useEffect(() => {
if (kullaniciDurum) {
const ad = window.prompt("Adınız Nedir?");
const y = parseInt(window.prompt("Yaşınız Nedir?"));
setKullaniciAdi(ad);
setYas(y);
}
}, [kullaniciDurum]);
console.log(kullaniciAdi)
console.log(yas)
Zaten kullanıcıDurum state hooksu aktiflik fonksiyonuyla çalışıyordu. Bu yüzden butona basınca değer isteme ekranı gelecektir.
Görüldüğü üzere yazdığımız değerler konsola düştü bu demek oluyor ki verileri kullanıcıdan almışız. Şimdi aldığımız bu değerleri ul içindeki li router işlemlerimizde bulunan uyeBilgileri linkine aktarıyoruz ama aktarırken template literals yani ters tırnak işareti kullanıyoruz ki String değer içine değişken ekleyebilelim. Bunun için ALT GR + Tırnak işareti basmanız yeterli. Daha sonra değişkenleri aktarıyoruz.
JavaScript:
<li onClick={() => navigate(`/uyeBilgileri/${kullaniciAdi}/${yas}`)}>Üye Bilgileri</li>Yönlendirme linkimizi güncelledik ama hala eksik bir şey var. Eğer bu şekilde çalıştırırsak üye bilgisinin bulunduğu sayfaya gidemeyeceğiz çünkü linki güncelledik ama linkin path yani yolunu güncellemedik bunun için Router.jsx içinde güncelleyeceğiz.
JavaScript:
<Route
path="uyeBilgileri/:kullaniciAdi/:yas"
element={
<PrivateRouter>
<UyelikSayfa />
</PrivateRouter>
}
/>Burada zaten path değerimiz uyeBilgileri idi. Ek olarak buraya kullanıcı ad ve yaş değerlerini koyuyoruz. Şimdi her şey çalışacaktır ama hala işimiz bitmedi. Bugünün konusu olan useParamsı üye bilgilerimizin olduğu component'e tanımlayalım.
JavaScript:
import React from 'react'
import { useParams } from 'react-router-dom'
function UyelikSayfa() {
const { kullaniciAd, yas } = useParams();
return (
<div>
<p>Hesabınza Hoş Geldiniz {kullaniciAd} {yas}</p>
</div>
)
}
export default UyelikSayfa
useParams import ettikten sonra kullanıcı adi ve yaş değerlerini useParams ile Javascript'in özelliği olan destruction özelliğini kullanarak parçalıyoruz. Son olarak da aldığımız değerleri ekrana yazdırıyoruz.
UYARI!!!
Router.jsx içinde yazdığımız değerlerle paramsta parçalama yapılacak değişken aynı adları aynı olmak zorunda. Örnekte kullaniciAd ile parçalama işlemi yapmaya kalktık ama ekrana boş değer gelecektir. Eğer Router.jsx içinde yazdığımız gibi kullaniciAdi şeklinde yazarsak değer gelecektir.
Şimdi uygulamayı test edelim.
Gördüğünüz gibi linkteki kullanıcı ad + yaş değerlerini aldık. Bir kez daha deneyelim.
Görüldüğü üzere çalışıyor. Eğer isterseniz useEffect içindeki if içine kullanıcı adı ve yaş değerleri boş olmama kontrolünü sağlayabilirsiniz bu şekilde değerler girilmez ekrana NaN gelecektir.
Bugün useParams gibi önemli bir özelliği öğrendik. Böylece linkteki değerleri ekrana yazdırabileceksiniz. Bir sonraki konuda görüşmek üzere.
Şimdi uygulamayı test edelim.
Gördüğünüz gibi linkteki kullanıcı ad + yaş değerlerini aldık. Bir kez daha deneyelim.
Görüldüğü üzere çalışıyor. Eğer isterseniz useEffect içindeki if içine kullanıcı adı ve yaş değerleri boş olmama kontrolünü sağlayabilirsiniz bu şekilde değerler girilmez ekrana NaN gelecektir.
Bugün useParams gibi önemli bir özelliği öğrendik. Böylece linkteki değerleri ekrana yazdırabileceksiniz. Bir sonraki konuda görüşmek üzere.
bir kaç gün önce hocalarımızdan bir kaçı fidye yazılımları üzerine canlı seminer verdi. bu tür konuları yönetimden rica etsek haftanın bir ve bir kaç günü dc üzerinden canlı olarak analtılıabilirmi 
