Çözüldü: url tepki yönlendiricisine parametre ekleme

URL React Router'a parametre eklemekle ilgili temel sorun, parametrelerin kullanıcılar tarafından kolayca manipüle edilebilmesidir. Kötü niyetli kullanıcılar potansiyel olarak yetkisiz kaynaklara veya verilere erişim elde etmek için parametreleri kullanabileceklerinden, bu durum güvenlik sorunlarına yol açabilir. Ek olarak, parametre değerleri düzgün şekilde doğrulanmazsa uygulamada beklenmeyen davranışlara yol açabilir. Son olarak, çok fazla parametre eklenirse, URL'nin karmaşıklığının artması nedeniyle performans sorunlarına neden olabilir.

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. “react-router-dom”dan { BrowserRouter as Router, Route, Link, useParams } dosyasını içe aktarın;
// Bu, reaksiyon-yönlendirici-dom kitaplığından bu kodda kullanılacak bileşenleri içe aktarır.

2. // Bu, farklı rotalar arasında gezinmeyi yönetecek bir yönlendirici bileşeni oluşturur.

3. // Bu, 'kullanıcı adı' dinamik parametresiyle bir yol oluşturur.

4. // Bu, bu rota eşleştirildiğinde Kullanıcı bileşenini oluşturur.

5. John // Bu, tıklandığında kullanıcı adı parametresi olarak 'john' olan Kullanıcı bileşenini oluşturacak /user/john yoluna bir bağlantı oluşturur.

6. function User() { //Bu, kullanıcı adını bağımsız değişken olarak alan ve üstündeki Bağlantı tıklanarak çağrıldığında onu div etiketlerinin içinde gösteren işlevsel bir bileşendir.

7. let { username } = useParams(); //Bu, useParams()'tan kullanıcı adına erişim elde etmek için yıkımı kullanır.

8. dönüş (

); //Bu, kullanıcı adına iletilen değeri içeren bir div öğesi döndürür; bu durumda bu durumda 'john' olacaktır.

React yönlendirici nedir

React Router, React uygulamaları için bir yönlendirme kitaplığıdır. Farklı sayfalar arasında gezinebilen tek sayfalık bir uygulama (SPA) oluşturmak için gerekli temel bileşenleri ve işlevleri sağlar. Geliştiricilerin, uygulamadaki belirli bileşenlerle eşlenen yollar olan yolları tanımlamasına olanak tanır. React Router ayrıca yönlendirmeler, dinamik rota eşleştirme ve sorgu parametreleri gibi özellikler de sağlar.

URL parametreleri

React Router'daki URL parametreleri, geliştiricilerin dinamik verileri URL'den React bileşenlerine iletmesine izin verir. Bu, URL'de iletilen parametrelere dayalı olarak farklı içerikleri görüntülemek için kullanılabilecek dinamik rotalar oluşturmak için kullanışlıdır. Örneğin, URL'de iletilen bir id parametresi ile bir kullanıcı profili sayfasını görüntülemek için "/user/:id" gibi bir yol kullanılabilir. Parametreler, URL'den dinamik veri gerektiren verileri veya diğer işlemleri filtrelemek için de kullanılabilir.

React'te bir URL'ye nasıl parametre eklerim?

React Router'da bir URL'ye parametre eklemek, "params" nesnesi kullanılarak yapılır. Bu nesne, URL'ye eklenecek anahtar/değer çiftlerini iletmenizi sağlar. Bir parametre eklemek için, onu şu şekilde params nesnesine eklemeniz yeterlidir:

const parametreler = { param1: 'değer1', param2: 'değer2' };

Ardından, rotanızı oluştururken, params nesnesini aşağıdaki gibi bir argüman olarak iletebilirsiniz:

Parametreler daha sonra bu rotaya gidildiğinde URL'ye eklenecektir.