Sıfırdan ileriye NextJs yeni bir konusuna hoş geldiniz. Bugün sizlere üç tane yeni hooks tanıtmak istiyorum bunlar usePathname,useSearchParams ve useRouter. Üçü de oldukça iş gören hooklardır şimdi detaylarına geçelim
usePathName Nedir?
usePathName, bir client component hookudur. Yani usePathName kullanacağınız yerde "use client" yani CSR kullanmanız gerekmektedir. Peki ne yapıyor sorusuna gelirsek sayfada mevcut olarak durulan güncel yolu yazdırır. Örneğin /blog sayfasında olduğunuzu varsayalım usePathName bize /blog olarak bir çıktı döner.
JavaScript:
"use client"
import { usePathname } from "next/navigation";
export default function Home() {
const pathname = usePathname();
console.log(pathname)
return (
<div className="text-black">
<div className="flex justify-center items-center h-screen">
<p>
Merhaba NextJs!
</p >
</div>
</div >
);
}Burada pathname değişkenine usePathname hookunu atıyorz ve konsola yazdırıyoruz.
Gördüğünüz gibi mevcut dosya yolunu konsola yazdırdık. Şimdi ana sayfada deneyelim bakalım ne çıkacak
JavaScript:
"use client"
import { usePathname } from "next/navigation";
export default function authorPage() {
const pathname = usePathname();
console.log(pathname);
return (
<div className="text-black">blog klasörü içindeki authors klasörünün sayfasına ulaştınız.</div>
);
}
Burada ise "/" yani ana sayfanın yolu çıktı.
useRouter Nedir?
useRouter aslında bir sayfadaki kullanıcıyı bir diğer sayfaya aktarma işlemi diyebiliriz. React ile yaparken navigate kullanıyorduk burada ise useRouter kullanıyoruz. Şimdi blog altında bulunan author klasöründeki sayfayı düzenleyelim. Basit bir input ve arama butonu koyacağız. Buraya id değerini yazıp kullanıcıyı author içindeki author-informations klasörüne yollayacağız. Bunu yaparken de useRouter hookunu kullanacağız.
JavaScript:
"use client"
import { Button } from "@heroui/button";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function authorPage() {
const [authorId, setAuthorId] = useState("0");
const router = useRouter();
return (
<div className="text-black flex align-middle justify-center">
<div className="">
<div>
Yazar id değeri giriniz
</div>
<div className="block">
<input type="text" className="border-black border-2" onChange={(e) => setAuthorId(e.target.value)}
/>
<Button className="bg-black text-white rounded-sm ml-2" onClick={() => { router.push(`/blog/authors/author-informations?id=${authorId}`) }}>Yazar Ara</Button>
</div>
</div>
</div>
);
}Burada authorId değerini tutmak için bir state tanımlıyoruz. Oluşturduğumuz inputun değerini almak için onChange yani her harf değiştiğinde authorId güncelle diyoruz. Arama butonuna gelirsek ise bu butona tıklandığında yukarıda aldığımız useRouter yani router, push özelliğini kullanarak kullanıcıyı /blog/authors/author-informations sayfasına yollayacağız. Ek olarak soru işaretiyle bunun bir sorgu olduğunu web'e bildiriyoruz ve id değerini kullanıcının yazdığı değer olarak yerleştirip kullanıcıyı diğer sayfaya yolluyoruz.
useSearchParams Nedir?
useSearchParams ile ise linkteki parametreleri bulmamıza yardımcı olur. Mesela örneğin localhost:3000/blog/author?id=3 linkini baz alalım. Bu id=3 değerini alır. Authors sayfasından bir id değeri yazıp author-informations?id=1907 olarak bu sayfaya geleceğiz. Buradaki id=1907 değerini alıp ekrana yazdıracağız.
JavaScript:
"use client"
import { useSearchParams } from "next/navigation";
export default function authorInfoPage() {
const searhParams = useSearchParams();
const search = searhParams.get("id");
return (
<div>
<div className="text-black">blog klasörü içindeki authors klasörünün içindeki author informations sayfasna ulaştınız.</div>
{search}
</div>
);
}useSearchParams import edip direkt içindeki özellik olan get ile alınacak sorgu değerini değişkene atıp ekrana yazdırıyoruz.
İlk olarak yazar id değerini giriyoruz ve yazar ara butonuna tıklıyoruz. Böylece bizi /blog/authors/author-informations sayfasına yollayacak.
NextJs bizi istediğimiz sayfaya istediğimiz id değeri ile yolluyor. Buradan useSearchParams ile id sorgu değerini alıp ekrana yazdırıyoruz ve böylece bir konunun daha sonuna geliyoruz. Bu 3 farklı hook çok işimize yarıyor özellike router ve useSearchParams çok sık kullanılıyor. Okuduğunuz için teşekkür ederim.
