Çözüldü: React Router Dom'u indirin

React Router DOM'u indirmeyle ilgili temel sorun, yapılandırmanın ve kurulumun zor olabilmesidir. React Router DOM, kitaplıkta yeni olan geliştiriciler için zaman alıcı ve karmaşık olabilen çok sayıda yapılandırma ve kurulum gerektirir. Ek olarak, React Router DOM sürekli gelişmektedir, bu nedenle geliştiricilerin uygulamalarıyla uyumluluğu sağlamak için en son sürümle güncel kalması gerekir.

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. “'react-router-dom'dan { BrowserRouter as Router, Route } dosyasını içe aktarın;” – Bu satır, tepki-yönlendirici-dom kitaplığından BrowserRouter ve Route bileşenlerini içe aktarır.

2. “ReactDOM.render(” – Bu satır, sağlanan kapsayıcıdaki DOM'a bir React öğesi oluşturmak ve bileşene bir referans döndürmek (veya durum bilgisi olmayan bileşenler için null değerini döndürmek) için ReactDOM render yöntemini çağırır.

3. "” – Bu, uygulamamız için yönlendirme işlevselliği sağlamak amacıyla tüm rotalarımızı sarmak için kullanılacak bir Yönlendirici bileşeni için bir açılış etiketidir.

4. "” – Bu, uygulamamız içinde '/' ile yapılan tüm isteklerle eşleşecek tek bir rota tanımlamak için kullanılacak bir Rota bileşeni için bir açılış etiketidir.

5. "” – Bu rota, tepki yönlendirici dom tarafından eşleştirildiğinde, bir Uygulama bileşenini DOM ağacımıza dönüştüren kendi kendine kapanan bir etikettir.
Uygulama bileşeni, kod tabanımızda başka bir yerde tanımladığımız herhangi bir React Bileşeni olabilir veya Material UI veya Bootstrap vb. gibi başka bir kitaplıktan veya paketten içe aktarılabilir.

6. “” – Bu, yukarıdaki 4. satırda açılan Rota Bileşeni için bir kapatma etiketidir, bu belirli rota tanımını kapatır, böylece daha sonra gerekirse kod tabanımızda bunun işlevselliğini veya davranışını etkilemeden başka rotalar eklenebilir. .

7. “” – Bu, yukarıdaki 3. satırda açılan Yönlendirici Bileşeni için bir kapatma etiketidir, bu belirli yönlendirici tanımını kapatır, böylece daha sonra gerekirse kod tabanımızda bu yönlendiricinin işlevselliğini veya davranışını etkilemeden başka yönlendiriciler eklenebilir. ..

8.”document.getElementById('root'));” – Son olarak, getElementById('root') belgesini, uygulamayı DOM ağacının içinde tam olarak nereye monte etmek/işlemek istediğimizi söyleyen ReactDOM oluşturma yöntemine bir argüman olarak iletiyoruz (bu durumda id=” olan bir öğenin içinde) kök").

tepki-yönlendirici-dom paketi

React Router, React için popüler bir yönlendirme kütüphanesidir. Uygulama rotalarını ve navigasyonu yönetmek için güçlü, kullanımı kolay bir API sağlar. tepki-yönlendirici-dom paketi, web uygulamaları için React Router'ın resmi sürümüdür. gibi bileşenleri sağlar. ve uygulamanızda yönlendirmeyi yönetmenize yardımcı olmak için. Geçerli rotanın bilgilerine bileşenlerinizden erişmek için useHistory, useLocation ve useParams gibi kancaları da içerir. React-router-dom ile URL parametrelerine, sorgu dizelerine ve hatta özel mantığa dayalı olarak kolayca dinamik rotalar oluşturabilirsiniz. Uygulamanızın navigasyon yapısı üzerinde daha ayrıntılı kontrol sağlamak için dinamik segmentlerle iç içe geçmiş rotalar da oluşturabilirsiniz.

tepki yönlendirici dom Kod Örneği nasıl indirilir

1. React Router Dom'u kurun:
React Router Dom'u kurmak için proje dizininizde aşağıdaki komutu çalıştırın:
"npm tepki-yönlendirici-dom'u kurun"

2. React Router Dom'u İçe Aktarın:
React Router Dom'u kurduktan sonra, aşağıdaki kod ile onu projenize aktarabilirsiniz:
``react-router-dom'dan { BrowserRouter as Router, Route } dosyasını içe aktarın`

3. Bir Rota Bileşeni Oluşturun:
Ardından, bir kullanıcı belirtilen yolu ziyaret ettiğinde sayfayı görüntüleyecek bir rota bileşeni oluşturun. Örneğin, uygulamanızda birisi /home'u ziyaret ettiğinde bir sayfa oluşturmak istiyorsanız, aşağıdaki kodu kullanabilirsiniz:
``

4. Uygulamanızı Yönlendirici Bileşeni ile Sarın:
Son olarak, tüm rotalarınızın doğru şekilde oluşturulması için uygulamanızı yönlendirici bileşeniyle sarın. Bunu, kök dosyanızda (genellikle index.js) aşağıdaki kodu kullanarak yapabilirsiniz: ` `.