Bugün bazı gelişmiş   sizinle paylaşacağım için gerçekten heyecanlıyım. React Router,   uygulamalarımızda dinamik ve sorunsuz gezinme oluşturmamızı sağlayan muhteşem bir araçtır. React Router tekniklerini React  Yaygın olarak temel yönlendirme ihtiyaçları için kullanılsa da, yönlendirme yeteneklerinizi tamamen yeni bir seviyeye yükseltebilecek daha az bilinen bazı teknikler vardır.  Bugün zamanla keşfettiğim favorilerimden birkaçını paylaşacağım.  Şunları ele alacağız:  Kötü şöhretli 404 sayfasını işlemek.  Geçerli rotayı vurgulamak için etkin bir sayfa göstergesi oluşturma.    kullanılması ve Konum kancalarının   . useNavigate useLocation  Bu makaleyi okumayı bitirdiğinizde, bu gelişmiş React Router tekniklerini güçlü bir şekilde kavrayacak ve bunları kendi projelerinizde uygulama konusunda kendinizi güvende hissedeceksiniz.  O halde hemen konuya dalalım ve yönlendirme becerilerimizi birlikte geliştirelim!  Hazır mısın? Başlayalım!  404 sayfasıyla uğraşmak   Daha büyük projeler üzerinde çalışırken bulunamayan rotalara dikkat etmek önemlidir. Bu rotalara sıklıkla   diyoruz çünkü sunucuda bir belge bulunmadığında 404   döndürüyorlar. 404 rotaları HTTP durum kodunu  Bu arada, eğer bir kedi aşığıysanız   adresine göz atmak hoşunuza gidebilir. http.cat  Şimdi, diğer rotaların hiçbiri tarayıcıdaki mevcut URL ile eşleşmediğinde tetiklenecek özel bir Rota oluşturmaya bakalım.   import {BrowserRouter, Routes, Route} from "react-router-dom"; function App() { return <BrowserRouter> <Routes> <Route path="/" element={<p>Landing page</p>}></Route> <Route path="/products" element={<p>Products page</p>}></Route> <Route path="*" element={<p>404 page</p>}></Route> </Routes> </BrowserRouter> }  Ana sayfaya   erişirken kullanıcılar Açılış sayfasına yönlendirilecektir.   sayfasına gitmek onları Ürünler sayfasına yönlendirecektir. Ancak belirli bir rotaya karşılık gelmeyen başka bağlantılara erişilirse 404 sayfası görüntülenecektir. / /products  Bu davranışın ardındaki neden, 404 sayfası için path özelliğinin   olarak ayarlandığı özel bir   uygulanmasıdır. Bu konfigürasyon, React Router'ın başka hiçbir rota eşleştirilemediğinde yalnızca bu rotayı kullanmasını sağlar. 404 Rotasının spesifik yerleşimi önemsizdir ve onun ayrılmaz bir bileşeni olarak   bölümü içinde herhangi bir yere yerleştirilebilir. * <Route> <Routes>...</Routes>  Aktif sayfa  Uygulamaların rotaları pratik bir şekilde kullanmasının bir başka yolu da menüde o anda aktif olan sayfayı vurgulamaktır.  İki bağlantı içeren bir gezinme menünüzün olduğunu varsayalım:  Ana Sayfa - Bu bağlantı kullanıcıyı ana sayfaya   yönlendirir. /  Hakkında - Bu bağlantı kullanıcıyı hakkında   sayfasına yönlendirir. /about  React Router ile kullanıcı   rotasındayken   linkini otomatik olarak öne çıkarmak mümkün hale geliyor. Benzer şekilde, kullanıcı   rotasındayken Ana Sayfa bağlantısını vurgulayabilirsiniz. En iyi yanı, bunu karmaşık koşul ifadelerine ihtiyaç duymadan başarabilmenizdir. /about About /  İşte bunu çalıştırmanın basit bir yolu:   import {NavLink} from "react-router-dom"; function getClassName({isActive}) { if (isActive) { return "active"; // CSS class } } function App() { return <ul> <li> <NavLink to="/" className={getClassName}>Home</NavLink> </li> <li> <NavLink to="/about" className={getClassName}>About</NavLink> </li> </ul> }  Yukarıda gördüğünüz kodun   sınıfın çalışması için biraz CSS'ye ihtiyacı var. Böylece, o anda aktif olan sayfanın menü bağlantısının kalın ve dikkat çekici görünmesini sağlayarak bunu geliştirebiliriz. active   .active { font-weight: bold; }    öğesinin   özelliği, yalnızca bir dize yerine bir işlevi kabul etme esnekliğine sahiptir. Bir işlevi kullanmaya karar verdiğinizde ona parametre olarak bir nesne verilecek ve bu nesnenin üzerinde zaten ayarlanmış olan   özelliği bulunacaktır. Fonksiyon içerisinde bu özelliğe kolaylıkla ulaşabilmek için parametre içerisine   ekleyerek yıkım işlemini kullanıyoruz. NavLink className isActive {isActive}  Daha sonra   doğruluk değerine sahip olup olmadığını doğrulamaya devam ediyoruz. Eğer durum buysa,   sınıf adını   döndüreceğiz. isActive CSS active  React Router'daki geçerli yol   bileşeninin   niteliğiyle eşleştiğinde   işlevi bir boolean değeri olarak değerlendirecektir. NavLink to isActive  Sonuç olarak, React Router   sınıfı karşılık gelen   öğesine sorunsuz bir şekilde dahil edecek ve onu mevcut aktif rota olarak gösterecektir. active <NavLink />  Daha kısa versiyon  Daha kısa bir yaklaşımı tercih ederseniz yukarıda belirtilen kodu yeniden düzenlemek için üçlü operatörü kullanabilirsiniz. Bu operatör, if/else ifadesini format:   . condition ? truthy expression : falsy expression  Üçlü operatörü pek kullanmıyorum çünkü çoğu zaman kodu daha az okunabilir hale getirebilir. Ancak bu durumda kullanılması kabul edilebilir.  Örnek olarak aşağıdakileri düşünün:   function getClassName({isActive}) { if (isActive) { return "active"; } else { return ""; } }  Yukarıdaki kodu aşağıdaki yaklaşımla değiştirebilirsiniz:   function getClassName({isActive}) { return isActive ? "active" : ""; }  Return ifadesinin üçlü operatörün dışına yerleştirildiğinden emin olmanız yeterlidir.   koşulu doğru olduğunda     yürütülecektir. Aksi takdirde   den sonraki ifade   olarak yürütülür. isActive ? "active" : ""  Artık   adında ayrı bir işlev tanımına olan ihtiyacı ortadan kaldırabiliriz. Bunun yerine şuna benzer bir ok işlevi kullanabiliriz:   . getClassName ({isActive}) => isActive ? "active" : ""  Bu değişikliğin okunmasının çok zor olduğunu düşünüyorsanız daha önce olduğu gibi ayrı bir işlevi kullanmaya devam edebilirsiniz.  Son kod şöyle görünecektir:   import {NavLink} from "react-router-dom"; function App() { return <ul> <li> <NavLink to="/" className={({isActive}) => isActive ? "active" : ""}>Home</NavLink> </li> <li> <NavLink to="/about" className={({isActive}) => isActive ? "active" : ""}>About</NavLink> </li> </ul> }  Ah oğlum, neredeyse düşüncelerini duyabiliyorum!  Sojin, sen gittin ve DRY ilkesini çiğnedin, değil mi?  Bu sadece bir örnek. O kadar uğraşmaya gerek yok 😀  Link ve NavLink Arasında Seçim Yapmak: Onları Farklı Kılan Nedir?  Her zamanki dostumuz   yerine   kullandığımı zaten fark etmiş olabilirsiniz. Ama merak etmeyin, nedenini açıklayayım. Görüyorsunuz,   bileşeni   desteği için bir işlev tanımı kullanmanıza izin vermiyor. Evet, şaşırtıcı olabilir ama   ile çalışırken durum böyledir. Link NavLink <Link /> className <Link />  Gördüğüm yaygın hatalardan biri, genç React geliştiricilerinin bir   bileşeninin   desteğindeki işlev tanımlarını kullanmaya çalışmasıdır ki bu da işe yaramamaktadır. <Link /> className  İlgilenirseniz bu konu hakkında bir makale yazabilirim. Sadece yorumlarda bana bildirin!   kullanınNavigasyon  Belirli durumlarda, React uygulamanızdaki sayfaların yerini programlı olarak yeniden konumlandırmanız gerekebilir. Örneğin ziyaretçiyi belirli bir sayfaya yönlendirmek için bir istek gönderip yanıtını bekleyebilirsiniz.  İşte birkaç örnek:  Kullanıcı oturum açmamışsa, onu oturum açma sayfasına gönderin.  GetLogin isteği başarıyla tamamlandıktan sonra kullanıcıyı   yönlendirin. /dashboard  Bu, kullanıcıyı programlı olarak yeni bir rotaya yönlendirmek için kullanabileceğiniz bir işlevi döndüren   kancasının kullanılmasını gerektirir. useNavigate()  Bir göz at:   import React, {useEffect} from "react"; import {useNavigate} from "react-router-dom"; function HelpPage() { const navigate = useNavigate(); useEffect(() => { const isLoggedIn = window.localStorage.getItem("isLoggedIn"); if (!isLoggedIn) { navigate("/login"); } }, []); return <h2>Help page</h2>; }  TarayıcıRouter'ı kullanmak çok önemlidir!  Bu örnekte, localStorage'ın   anahtarına atanmış bir değere sahip olup olmadığını kontrol ediyoruz. Aksi takdirde,   işlevini kullanarak kullanıcıyı   sayfasına yönlendireceğiz. isLoggedIn navigate("/login") /login  Çalışmasını sağlamak için,   bileşeninin içine yerleştirilmiş bir bileşenin içinde   kancasını kullanmayı unutmayın. Aksi halde düzgün çalışmayacaktır. <BrowserRouter /> useNavigate()  Örneğin aşağıdaki örnek çalışmaz:   import React from "react"; import {BrowserRouter, useNavigate} from "react-router-dom"; function App() { // ❌ This breaks because the component was not wrapped by BrowserRouter, but its children are. const history = useNavigate(); return <BrowserRouter> {/* ... */} </BrowserRouter>; }    bileşeninin içindeki   kancasını kullanmaya çalışıyorsanız küçük bir aksaklıkla karşılaşabilirsiniz. Bunun nedeni   bileşenini   ile sarmalamadığınız sürece çalışmamasıdır. App() useNavigate() App() <BrowserRouter />  Ama endişelenme!  İyi haber şu ki, App içindeki tüm alt bileşenler otomatik olarak   tarafından sarılacak, böylece bu alt bileşenlerde   herhangi bir sorun yaşamadan mutlu bir şekilde kullanabilirsiniz. <BrowserRouter /> useNavigate()  Ancak gerçekten   bileşeninde   işlevini kullanmanız gerekiyorsa, basit bir çözüm var. Yalnızca   ı saran bir ana bileşen oluşturmanız ve   öğesini bu ana bileşenin içine taşıdığınızdan emin olmanız gerekir. Bunu yaptıktan sonra, hazır olacaksınız ve   bileşenindeki   işlevini istediğiniz gibi kullanabilirsiniz 💗 <App /> useNavigate() <App /> <BrowserRouter /> <App /> useNavigate()  Erişilebilirliğin ve Doğru Bağlantı Kullanımının Sağlanması  Web sitenizi erişilebilir hale getirmek söz konusu olduğunda bağlantılarınızın nasıl yapılandırıldığına dikkat etmek önemlidir. Bunu sağlamak için diğer yöntemler yerine   elemanlarının kullanılması tavsiye edilir. <Link />  Neden?  Bu öğeler otomatik olarak   bilinen   etiketleri olarak işlenecektir. erişilebilirlik özellikleriyle <a>  Şimdi size dostane bir ipucu: normal   öğelerinizi   tarafından sağlanan   yöntemiyle değiştirmekten kaçının. Bu yöntem yalnızca   öğesinin kullanılmasının mümkün olmadığı durumlarda kullanılmalıdır. <Link /> useNavigate() .push() <Link />  Bu ne zaman olur?  Genellikle bu,   işleminin sonucu gibi belirli bir mantığa dayalı olarak kullanıcıları programlı olarak yönlendirmeniz gerektiği zamandır. fetch()   KullanımKonumu  React Router'ın sizi yeni bir adrese götürdüğü her defasında bir kod parçasını çalıştırmak isterseniz ne olur?    kancasının yardımıyla bunu kolayca başarabilirsiniz. Ancak ayrıntılara dalmadan önce bunun kullanışlı olabileceği bazı senaryoları inceleyelim. En yaygın kullanım durumlarından biri, Google Analytics gibi analiz hizmetinize bir   etkinliği göndermektir. useLocation sayfa görüntüleme  Ancak şunu belirtmekte fayda var ki Google Analytics 4 artık bu işi otomatik olarak yapıyor, yani bunu mutlaka sizin uygulamanıza gerek yok.  Bununla birlikte,   kancasını öğrenmek, bunun için başka amaçlar bulabileceğiniz için hala değerlidir. Örneğin, onu diğer kütüphaneler ve analiz hizmetleriyle entegre etmek veya ziyaret edilen rotalara göre belirli eylemleri yürütmek için kullanabilirsiniz. useLocation  İmkanlar sonsuzdur!  KullanımKonum kancası    kancası son derece kullanışlıdır çünkü size o anda kullanılmakta olan rota hakkında bilgi verir. useLocation  UseLocation kancasının nasıl kullanılacağına ilişkin kullanıcı dostu bir kılavuz:   import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); console.log(location.pathname); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Artık rota bilgilerine konum değişkeni aracılığıyla erişebilirsiniz. Geçerli   içeren bir nesnedir. pathname  Kullanıcının şu anda hangi rotaya göz attığını bulmak için   kullanmanız yeterlidir. Size   ,   veya kurduğunuz başka herhangi bir rota gibi bir şey verecektir. location.pathname / /about    kancasında olduğu gibi, kodunuzun   tarafından sarılmış bir bileşenin içinde çalışmasının önemli olduğunu unutmayın. Aksi halde   kancası sihrini gerçekleştiremez. useNavigate <BrowserRouter /> useLocation  Konum Değişikliklerine Yanıt Verme  Konum değiştiğinde, React Router'daki mevcut URL yoluna erişmek için   kancasını kullanabilirsiniz. Kodunuzu bir   kancasıyla sararak ve bağımlılığı   olarak ayarlayarak, yeni bir URL'ye gezinme olduğunda belirli bir kod parçasını çalıştırabilirsiniz. useLocation useEffect location  İşte bunun nasıl yapılacağına dair bir örnek:   import React, {useEffect} from "react"; import {BrowserRouter, Routes, Route, useLocation} from "react-router-dom"; import {createRoot} from "react-dom/client"; function App() { const location = useLocation(); // run a piece of code on location change useEffect(() => { console.log(location.pathname); // send it to analytic, or do some conditional logic here }, [location]); return <Routes> {/* routes here... */} </Routes> } createRoot(document.querySelector("#react-root")).render(<BrowserRouter><App /></BrowserRouter>);  Kullanıcı navigasyon sırasında yeni bir rotaya geçtiğinde,   kancasının içindeki kod çalışacak ve işini yapacaktır. Temel olarak, konum nesnesinde bir değişiklik olduğunda belirli kodun yürütülmesini sağlamanın bir yoludur. useEffect  İyi İş, Artık bir React Router Uzmanısınız 🥳  Özetlemek gerekirse, bu makale size React Router hakkında daha derin bir anlayış kazandırdı. Burada tartışılan özelliklerin tamamını kullanamayabilirsiniz. Yine de bunların farkında olmanız harika. Gelecekte benzer işlevleri birleştirmeye ihtiyaç duyarsanız tam olarak nereye bakmanız gerektiğini bilirsiniz. Bu nedenle, kolay referans olması için bu gönderiyi kaydettiğinizden veya yer imlerinize eklediğinizden emin olun. Ayrıca herhangi bir sorunuz varsa veya daha fazla yardıma ihtiyacınız olursa bana Twitter üzerinden ulaşmaktan çekinmeyin. Yardım etmek için buradayım!

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Gelişmiş React Router V6 Teknikleri: Temellerin Ötesine Geçmek

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Kazanmak için Dokun: Telegram, Solana'dan Önce Sonraki 10 Milyar Kripto Kullanıcısına Katılabilir

Sulara Yelken Açmak: Data Lakes ile Üretim Sınıfında RAG Uygulamaları Geliştirme

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Benzersiz Bir Ekosistemi Güçlendiren Bitcoin UTXO Modeli

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps