Uygulama geliştirmek hatalar ile birlikte yaşamaya alışmayı gerektirir. Hata yapmak için bir çok neden bulunmaktadır. Bunlardan birtanesi de kullanılan program veya kütüphanelerin yeni sürümlerinin çıkmasıdır. Bu nedenle uygulama geliştirirken kullanılan bileşenlerin dökümanlarının okunması ve yeni eklemeler veya kullanımdan kaldırılan özellikler araştırılmalıdır.

React router dom ile çalışırken aldığımız hatalarda bir tanesi de

Error: [...] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

hatasıdır. Bu hata genellikle React Router V6 kullanırken Route bileşeninin React Router V5 şeklinde yazılmasından kaynaklanır. Çünkü V6 sürümü ile birlikte, Swithc kullanımdan kalkmış ve yerine Router gelmiş ve Route kullanımı da değişmiştir. Yeni Route kullanımında element probu ile yönlendirilme yapılacak komponent belirtilmektedir.

    <Router>
        <Route path='/' element={<Home />}  />
        ...
    </Router>
    // Yönlendirme çalışacaktır

Eğer yönlendirmeyi aşağıdaki şekilde yaptıysanız hata mesajı alacaksınız.

    <Router>
        <Route path='/'>
            <Home />
        </Route>
        ...
    </Router>
    // Error: [Home] is not a <Route> component. 
    // All component children of 
    // <Routes> must be a <Route> or <React.Fragment>
    // hatası oluşur.

Bu nedenle eğer React Router V6 ile çalışıyorsanız, yeni nesil yazım şeklini kullanmanız gerekecektir. React Router V6 ile ilgili yazımıza ulaşmak için tıklayınız.

React Router Nedir?

React ile tek sayfa uygulama geliştirirken sayfalar arasında geçişleri sağlayan ve React JS ile en çok kullanılan Router paketidir. Farklı işlem şekillerini destekler. Genel olarak tarayıcılar ile birlikte React Router Dom paketi kullanılmaktadır. Uzun süredir geliştirildiğinden en çok kullanılan router paketlerinden bir tanesidir.

React Router Kullanmalı mıyım?

Tek sayfa uygulama geliştirirken sayfalar arasındaki geçişleri kontrol etmek gerekmektedir. Bu işlemi kolay bir şekilde yapmak için React Router kütüphanesi kullanılabilir. Bu geliştiriciye büyük kolaylık sağlayacaktır. Kullanmadan da geliştirme yapabilir. Fakat bu durumda sayfalar arası geçiş işlemlerini geliştirici yapmak zorundadır veya farklı bir router kütüphanesi tercih edilebilir.

Sonuç

Uygulamalar ve kütüphaneler devamlı gelişiyor ve daha kolay ve etkin bir kullanıma ulaşıyor. Bu nedenle yeni sürüm çıktığında eski sürümler ile bazı bölümler uyumlu olmayabiliyor. Geliştiricilerin bir uygulama geliştirirken mümkün oldukça kullanacakları bileşenlerin dökümanlarını okumaları daha az hata yapılmasını sağlayacaktır.

Birçok geliştirici gibi siz de React Router ile sorunlar yaşadınız mı?