React router history,push'ta veri iletilmesiyle ilgili temel sorun, verilerin sayfa yenilemelerinde kalıcı olmamasıdır. Bir kullanıcı sayfayı yenilediğinde, history.push'ta saklanan veriler kaybolacak ve sonraki sayfa yüklemelerinde kullanılamayacaktır. Bu, beklenmeyen davranışlara yol açabilir ve önceki bir sayfa yüklemesindeki verilere erişmeye veya verileri depolamaya çalışırken sorunlara neden olabilir.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Bu satır, uygulamadaki geçerli konumu izleyen geçmiş nesnesine erişim sağlayan tepki-yönlendirici-dom kitaplığından useHistory kancasını içe aktarır.
2. Bu satır, Bileşenim adlı işlevsel bir bileşeni bildirir ve onu sabit bir değişkene atar.
3. Bu satır, tarih nesnesine erişim elde etmek ve bunu tarih adlı sabit bir değişkene atamak için 1. satırda içe aktarılan useHistory kancasını kullanır.
4. Bu satır, data adlı bir bağımsız değişkeni alan ve history.push() kullanarak yol adı ve durum özelliklerini içeren bir nesneyi geçmiş yığınına iten, handleClick adlı bir işlev bildirir.
5. Bu satır, bir kullanıcı tarafından tıklandığında argümanı olarak someData içeren bir nesneyle handleClick()'i çağıran onClick olay işleyicisine sahip bir düğme öğesi döndürür.
Geçmiş itme
React Router'da History push, sayfa yenilemesine neden olmadan tarayıcıdaki URL'yi programlı olarak değiştirmek için kullanılan bir yöntemdir. Geliştiricilerin, gezinme ve derin bağlantı oluşturmayı hâlâ sürdürebilen tek sayfalık uygulamalar oluşturmasına olanak tanır. History push, geliştiricilerin sayfayı yeniden yüklemeden geçerli URL'yi değiştirmesine izin veren tarayıcının history API'sini kullanarak çalışır. Bu, kullanıcıların her seferinde yeniden yüklemek zorunda kalmadan bir uygulamanın farklı sayfaları arasında gezinmesini mümkün kılar. Ek olarak, derin bağlantı için kullanılabilir ve kullanıcıların doğrudan bir uygulamanın belirli bölümlerine bağlanmasına olanak tanır.
Tepki yönlendiricisinde geçmişi nasıl kullanırım?
React Router, React uygulamalarınızda geçmişi kullanmanın bir yolunu sunar. Geçmiş, mevcut sayfanın yanı sıra daha önce ziyaret edilen sayfaları da takip etmenizi sağlar. Bu, gezinme oluşturmak ve kullanıcı eylemlerini takip etmek için kullanışlıdır.
React Router'da geçmişi kullanmak için, history paketinden createHistory() yöntemini kullanarak bir history nesnesi oluşturmanız gerekir. Bu, push(), replace() ve go() gibi yöntemlere erişmenizi sağlar. Bu yöntemler, tarayıcının URL'sini değiştirmenize ve uygulamanızdaki farklı yollar arasında gezinmenize olanak tanır. URL'deki değişiklikleri dinlemek ve uygulamanızı buna göre güncellemek için listen() yöntemini de kullanabilirsiniz.
Bir geçmiş nesnesi oluşturduktan sonra, onu oluştururken yönlendirici bileşeninize iletebilirsiniz. Bu, React Router'ın kullanıcılar tarafından yapılan tüm değişiklikleri takip etmesine ve buna göre güncelleme yapmasına izin verecektir.
Geçmişi React Router ile kullanmak, geliştiricilerin, kullanıcıların anlaması ve etkileşim kurması kolay olan güçlü navigasyon bileşenleri oluşturmasını kolaylaştırır.
