React Router 6 ile beraber gelen lazy loading özelliği sayesinde, büyük boyutlu componentler sadece gerekli olduğu zaman yüklenerek, başlangıç yükleme performansınızı iyileştirebilirsiniz. Lazy loading kullanarak, kullanıcılarınızın deneyimini hızlandırmak ve kaynak kullanımını optimize etmek mümkün. İşte React Router 6 ile bir lazy loading kullanım örneği:
Bu yapılandırmada Suspense component'i, lazy loading sırasında bir yedek UI gösterilmesini sağlar. Böylece, kullanıcılarınız component'in yüklenmesini beklerken belirlediğiniz bir yedek arayüz ile karşılanır.
Ayrıca, React Router 6 ile birlikte gelen
Bu örnekte, Layout component'i ana sayfa düzenini tanımlarken, Dashboard ve Profile component'leri ise alt sayfalar olarak düşünülebilir. Kullanıcı /dashboard veya /profile yoluna gittiğinde, Layout component'i hala gösterilmeye devam eder ve yalnızca çocuk component'ler değişir. Bu yaklaşım sayesinde, tekrar eden layout yapılarından kaçınabilir ve uygulamanızın bakımını kolaylaştırabilirsiniz.
React Router 6'nın getirdiği bir diğer yenilik de, Outlet componentidir. Outlet componenti, iç içe rotalarınızın render edileceği yer olarak düşünülebilir. Yani, bir parent component içerisinde bir child componenti göstermek için kullanabilirsiniz. Bu, nested routing yapılarını daha da esnek bir hale getirir. İşte bir Outlet kullanım örneği:
Burada, LayoutWithOutlet componenti Layout componenti ile bir Outlet'ı birleştirir. Bu şekilde, /dashboard veya /profile gibi yolları ziyaret ettiğinizde, ilgili component Outlet yerine render edilir. Bu da uygulamanın genel yapısını daha da modular ve yönetilebilir kılar.
React Router 6 ayrıca useNavigate hook'unu da sunar. Bu hook ile, programatik olarak yeni rotalara yönlendirme yapabilirsiniz. Örneğin, bir kullanıcı formu başarıyla doldurduktan sonra onu başka bir sayfaya yönlendirmek isteyebilirsiniz. İşte bu senaryoda useNavigate hook'unun nasıl kullanılabileceğine dair bir örnek:
Bu komponentte, handleSubmit fonksiyonu tetiklendiğinde, kullanıcı /thank-you yoluna yönlendirilir.
Son olarak, useParams hook'u ile rotada tanımlanan parametreleri kolayca alabilir ve bu parametreleri component'lerinizde kullanabilirsiniz. Dynamic routing ihtiyaçlarınız için oldukça faydalı olan bu hook, URL'den gelen bilgileri işlemenize olanak tanır:
Burada, UserProfile componenti, URL'den alınan userId parametresini kullanarak ilgili kullanıcı profilini gösterir.
React Router 6'nın bu özellikleri ve daha fazlası, modern web uygulamaları geliştirmede esneklik ve güçlü yönlendirme kapasitesi sunar. React Router'ın sunduğu bu yapılandırma yöntemleri ile uygulamanızın yönlendirme mantığını optimize edebilir ve kullanıcı deneyimini artırabilirsiniz.