Çözüldü: url tepki yönlendirici dom v6'dan sorgu alın

URL React Router DOM v6'dan sorgu almayla ilgili temel sorun, sorgu parametrelerine erişmek için yerleşik bir yol sağlamamasıdır. Bunun yerine, geliştiricilerin URL dizesini manuel olarak ayrıştırması ve sorgu parametrelerini kendilerinin çıkarması gerekir. Bu sıkıcı bir süreç olabilir ve doğru yapılmadığı takdirde hatalara yol açabilir. Ek olarak, URL yapısı değişirse kodun buna göre güncellenmesi gerekebilir.

import { useLocation } from "react-router-dom";

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. “'react-router-dom'dan { useLocation } içe aktarın;” – Bu satır, tepki-yönlendirici-dom kitaplığından useLocation kancasını içe aktarır.
2. “const MyComponent = () => {” – Bu satır, bir React bileşeni döndürecek olan MyComponent adlı bir işlevi bildirir.
3. “sabit konum = useLocation();” – Bu satır, uygulamanın geçerli konumu (örn. URL) hakkında bilgi almak için içe aktarılan useLocation kancasını kullanır.
4. “const queryParams = yeni URLSearchParams(konum.arama);” – Bu satır, geçerli URL'deki tüm sorgu parametrelerini içeren bir nesne oluşturur (örn. ?myParam=foo).
5. Kodun geri kalanı, URL sorgu dizesinde (varsa) myParam'ın değerini görüntüleyen h1 ve p etiketiyle bir React bileşeni döndürüyor.

Tepki yönlendirici Dom

React Router DOM, geliştiricilerin React uygulamalarında rotalar oluşturmasına ve yönetmesine olanak tanıyan bir React yönlendirme kitaplığıdır. Uygulamada gezinmek için bir API sağlayarak, geliştiricilerin rotaları bildirimsel olarak tanımlamasına, bileşenleri geçerli URL'ye göre oluşturmasına ve uygulamanın farklı bölümleri arasında bağlantı kurmasına olanak tanır. Ayrıca dinamik rota eşleştirme, konum izleme ve navigasyon korumaları gibi özellikleri de destekler.

Reaksiyon v6 yönlendiricisinde sorgu dizesini nasıl alabilirim

v6

React Router v6'da, useLocation kancasını kullanarak sorgu dizesi parametrelerine erişebilirsiniz. Bu kanca, yol adı, arama, karma ve durum özellikleri dahil olmak üzere geçerli URL hakkında bilgi içeren bir konum nesnesi döndürür. search özelliği, sorgu dizesi parametrelerini bir dize olarak içerir. Ardından, tüm sorgu dizesi parametrelerini içeren bir nesne elde etmek için bu dizeyi ayrıştırabilirsiniz.
Örneğin:
const {arama} = useLocation();
const parametreleri = yeni URLSearchParams(arama);
const param1 = params.get('param1');