https://github.com/sedadiriker/nested-route-practice

https://github.com/sedadiriker/nested-route-practice

nested-routes react-nested-routing usenavigate

Last synced: 3 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/sedadiriker/nested-route-practice
• Owner: sedadiriker
• Created: 2024-04-17T13:33:48.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-04-17T13:49:14.000Z (7 months ago)
• Last Synced: 2024-04-17T14:47:09.369Z (7 months ago)
• Topics: nested-routes, react-nested-routing, usenavigate
• Language: JavaScript
• Homepage: https://nested-route.netlify.app/
• Size: 195 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nested Route Kullanımı

Nested route, birçok modern web uygulamasında kullanılan bir yönlendirme yöntemidir. Bu yöntem, bir ana bileşen içinde başka bileşenlerin gösterilmesini sağlar. Özellikle karmaşık veya hiyerarşik veri yapılarına sahip uygulamalarda yaygın olarak kullanılır.

## Nasıl Yapılır?

1. **Ana Route Oluşturma**: İlk adım olarak, ana route'unuzu oluşturmanız gerekir. Bu, genellikle uygulamanızın ana bileşeni için yapılır.

2. **Nested Route Oluşturma**: Ana bileşeninizde başka bir bileşene gömülü bir bileşen oluşturursunuz ve bunun için bir nested route tanımlarsınız. Bu, genellikle bir alt bileşenin daha fazla detayını göstermek için yapılır.

3. **Router Outlet Kullanımı**: Nested route kullanırken, genellikle `Router Outlet` bileşenini kullanırsınız. Bu bileşen, içine gömülü bileşenleri dinamik olarak göstermek için kullanılır. Ana bileşeninizde bu bileşeni kullanarak nested route'ları gösterirsiniz.

## Örnek

```javascript



  

    

      {/* Ana Route: Ana sayfa */}

      } />


      {/* Ana Route: Giriş Yap */}

      } />

      {/* Ana Route: Kullanıcı */}

      }>

        {/* Nested Route: Kullanıcı Ana Sayfa */}

        }/>

        {/* Nested Route: Kullanıcı Ürünleri */}

        }/>

      

      {/* Ana Route: Yönetici */}

      }>

        {/* Nested Route: Yönetici Ana Sayfa */}

        }/>

        {/* Nested Route: Yönetici Ürünleri */}

        }/>

        {/* Nested Route: Yönetici Ürün Ekleme */}

        }/>

      

    

  



```


- path özelliği, belirli bir URL yoluyla eşleşen rotayı belirtir.

- element özelliği, eşleşen rotanın karşılık gelen bileşeni veya bileşen ağacını temsil eder.

- index özelliği, nested route'un ana bileşeni olmasını belirtir. Yani, path="" ile tanımlanan rotaya erişildiğinde bu bileşen gösterilir.

Örneğin, /user yolu eşleştiğinde  bileşeni gösterilir ve içinde iki adet nested route bulunur: path="" (index) olan route  bileşenini, path="userProduct" olan route ise  bileşenini gösterir. Benzer şekilde, /admin yolu eşleştiğinde  bileşeni gösterilir ve içindeki nested routelar belirtilen bileşenleri gösterir.