Megoldva: a react router dom letöltése

A React Router DOM letöltésével kapcsolatos fő probléma az, hogy nehéz lehet konfigurálni és beállítani. A React Router DOM sok konfigurálást és beállítást igényel, ami időigényes és bonyolult lehet azon fejlesztők számára, akik még nem ismerik a könyvtárat. Ezenkívül a React Router DOM folyamatosan fejlődik, így a fejlesztőknek naprakésznek kell lenniük a legújabb verzióval, hogy biztosítsák a kompatibilitást az alkalmazásaikkal.

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

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

1. „import { BrowserRouter as Router, Route } from 'react-router-dom';” – Ez a sor importálja a BrowserRouter és Route összetevőket a react-router-dom könyvtárból.

2. „ReactDOM.render(” – Ez a sor meghívja a ReactDOM renderelési metódust, hogy egy React elemet rendereljen a mellékelt tárolóban lévő DOM-ba, és visszaadja a hivatkozást az összetevőre (vagy nullát ad vissza állapot nélküli összetevők esetén).

3. "” – Ez a Router komponens nyitócímkéje, amely az összes útvonalunk becsomagolására szolgál, hogy útválasztási funkcionalitást biztosítson alkalmazásunk számára.

4. "” – Ez egy nyitócímke egy Route komponenshez, amely egyetlen útvonal meghatározására szolgál az alkalmazásunkon belül, amely megfelel a '/' címen küldött kéréseknek.

5. "” – Ez egy önzáró címke, amely egy alkalmazás-összetevőt jelenít meg a DOM-fánkba, amikor ezt az útvonalat a react router dom megfelelteti.
Az App komponens bármely React komponens lehet, amelyet máshol definiáltunk a kódbázisunkban, vagy importáltunk egy másik könyvtárból vagy csomagból, például Material UI vagy Bootstrap stb.

6. "" – Ez a fenti 4. sorban megnyitott Route Component zárócímke, lezárja ezt a konkrét útvonaldefiníciót, hogy szükség esetén más útvonalak is hozzáadhatók a kódbázisunkhoz anélkül, hogy ez befolyásolná a funkcionalitást vagy viselkedést. .

7. „” – Ez egy zárócímke a fenti 3. sorban megnyitott Router komponenshez, amely lezárja ezt a konkrét útválasztó definíciót, hogy szükség esetén további útválasztókat lehessen hozzáadni a kódbázisunkhoz anélkül, hogy ez befolyásolná a funkcionalitást vagy viselkedést. ..

8.”document.getElementById('root'));” – Végül a getElementById('root') dokumentumot adjuk át argumentumként a ReactDOM renderelési metódushoz, amely megmondja, hogy pontosan hol akarjuk felcsatolni/renderelni az alkalmazást a DOM-fán belül (jelen esetben egy id= elemen belül). gyökér").

react-router-dom csomag

A React Router egy népszerű útválasztó könyvtár a React számára. Erőteljes, könnyen használható API-t biztosít az alkalmazási útvonalak és a navigáció kezeléséhez. A react-router-dom csomag a React Router webes alkalmazásokhoz készült hivatalos verziója. Olyan alkatrészeket biztosít, mint pl és a hogy segítsen kezelni az útválasztást az alkalmazásban. Tartalmaz olyan horgokat is, mint a useHistory, useLocation és useParams az aktuális útvonal információinak eléréséhez az összetevőkből. A react-router-dom segítségével egyszerűen hozhat létre dinamikus útvonalakat URL-paraméterek, lekérdezési karakterláncok vagy akár egyéni logika alapján. Létrehozhat beágyazott útvonalakat is dinamikus szegmensekkel, így részletesebben szabályozhatja az alkalmazás navigációs szerkezetét.

hogyan lehet letölteni a react router dom kód példáját

1. Telepítse a React Router Dom programot:
A projektkönyvtárban futtassa a következő parancsot a React Router Dom telepítéséhez:
`npm install react-router-dom`

2. React Router Dom importálása:
A React Router Dom telepítése után a következő kóddal importálhatja a projektbe:
`import { BrowserRouter as Router, Route } from "react-router-dom"

3. Útvonal-összetevő létrehozása:
Ezután hozzon létre egy útvonal-összetevőt, amely megjeleníti az oldalt, amikor a felhasználó felkeresi a megadott útvonalat. Ha például egy oldalt szeretne megjeleníteni, amikor valaki felkeresi a /home webhelyet az alkalmazásában, a következő kódot használhatja:
``

4. Csomagolja be az alkalmazást útválasztó komponenssel:
Végül csomagolja be az alkalmazást az útválasztó komponensbe, hogy az összes útvonal helyesen kerüljön megjelenítésre. Ezt a gyökérfájlban (általában index.js) található következő kód használatával teheti meg: ` `.

Kapcsolódó hozzászólások:

Írj hozzászólást