v2.5.2
Giriş yap

url'de slug + uuid kullanımı

mimra
246 defa görüntülendi

merhaba arkadaşlar.

envato elements, amazon gibi sitelerde url yapısının mantığını anlamama yardımcı olabilir misiniz?

örnek:
elements.envato.com/nody-react-react-js-landing-page-template-N2JTWYQ
amazon.com.tr/Caspar-David-Friedrich-Bulutların-Üzerinde/dp/B07BSJ8HRB

her iki sitede de domainden sonra gelen slug kısmı benzersiz bir id ile bitiyor. geçerli bir id ile değiştirdiğinizde ortadaki slug kısmını es geçip ilgili sayfaya gidiyor.

buradaki id kısmı amazonda asin olarak geçiyor. milyonlarca ürün için bu asin kısmının benzersiz oluşturulduğunu nasıl kontrol edebiliyorlar. ikinci sorum ise bu kısım değiştiğinde slug önemini yitirip doğru url'e nasıl yönlendiriyorlar.

react ile bu url yapısını kullanmak istiyorum, nasıl bir yol izlemeliyim?

devepdogukan
520 gün önce

Envato'nun urlsini baz alarak anlatacağım çünkü bende öyle bir yapı kullanıyorum.


const url = "nody-react-react-js-landing-page-template-N2JTWYQ"
const urlToArr = url.split("-")
const id = urlToArr.at(-1)
const slug = urlToArr.slice(0,-1).join("-")

const product = await fetch(id) //Burada id'e göre ürünü getirdik 

if([product.slug,product.id].join("-") !== url){
  // Eğer bu koşula giriyorsa kullanıcı yanlış slugda
  navigate([product.slug,product.id].join("-")) // olması istenilen url'e kullanıcıyı yönlendirdik
}

// Burada ise slug ve id doğru kısımdadır demektir , işlemlerine devam edebilirsin

Yukarıda verdiğim örnekte değişken isimleri vs kendine göre düzenlemen gerek. Mantığını anlatmaya çalıştım