Riješeno: preuzimanje react routera dom

Glavni problem vezan za preuzimanje React Router DOM-a je taj što može biti teško konfigurirati i postaviti. React Router DOM zahtijeva mnogo konfiguracije i podešavanja, što može biti dugotrajno i složeno za programere koji su novi u biblioteci. Osim toga, React Router DOM se stalno razvija, tako da programeri moraju biti u toku sa najnovijom verzijom kako bi osigurali kompatibilnost sa svojim aplikacijama.

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 } iz 'react-router-dom';” – Ova linija uvozi komponente BrowserRouter i Route iz biblioteke react-router-dom.

2. “ReactDOM.render(” – Ova linija poziva ReactDOM render metodu da prikaže React element u DOM-u u isporučenom kontejneru i vrati referencu na komponentu (ili vraća null za komponente bez stanja).

3. "” – Ovo je početna oznaka za komponentu rutera koja će se koristiti za omotavanje svih naših ruta kako bi se pružila funkcionalnost rutiranja za našu aplikaciju.

4. "” – Ovo je početna oznaka za komponentu rute koja će se koristiti za definiranje jedne rute unutar naše aplikacije koja će odgovarati svim zahtjevima na '/'.

5. "” – Ovo je samozatvarajuća oznaka koja prikazuje komponentu aplikacije u našem DOM stablu kada se ovoj ruti poklapa react router dom.
Komponenta aplikacije može biti bilo koja React komponenta koju smo definirali drugdje u našoj bazi koda ili uvezli iz druge biblioteke ili paketa kao što je Material UI ili Bootstrap itd…

6. “” – Ovo je završna oznaka za komponentu rute koja je otvorena na liniji 4 iznad, ona zatvara ovu konkretnu definiciju rute tako da se druge rute mogu dodati ako je potrebno kasnije u našoj bazi koda bez utjecaja na funkcionalnost ili ponašanje ove .

7. “” – Ovo je završna oznaka za komponentu rutera koja je otvorena na liniji 3 iznad, ona zatvara ovu konkretnu definiciju rutera tako da se drugi ruteri mogu dodati ako je potrebno kasnije u našoj bazi kodova bez utjecaja na funkcionalnost ili ponašanje ove ..

8.”document.getElementById('root'));” – Konačno, dokument getElementById('root') prosljeđujemo kao argument ReactDOM metodi renderiranja koja mu govori gdje tačno želimo da montiramo/renderiramo aplikaciju unutar DOM stabla (u ovom slučaju unutar elementa sa id=” root”).

paket react-router-dom

React Router je popularna biblioteka usmjeravanja za React. Pruža moćan, jednostavan za korištenje API za upravljanje rutama aplikacija i navigacijom. React-router-dom paket je službena verzija React Routera za web aplikacije. Obezbeđuje komponente kao što su i za pomoć u upravljanju usmjeravanjem u vašoj aplikaciji. Takođe uključuje kuke kao što su useHistory, useLocation i useParams za pristup informacijama o trenutnoj ruti iz vaših komponenti. Sa react-router-dom možete lako kreirati dinamičke rute na osnovu URL parametara, nizova upita ili čak prilagođene logike. Također možete kreirati ugniježđene rute s dinamičkim segmentima kako biste pružili detaljniju kontrolu nad strukturom navigacije vaše aplikacije.

kako preuzeti primjer koda react routera dom

1. Instalirajte React Router Dom:
U direktoriju vašeg projekta pokrenite sljedeću naredbu da instalirate React Router Dom:
`npm install react-router-dom`

2. Uvezite React Router Dom:
Nakon što instalirate React Router Dom, možete ga uvesti u svoj projekat sa sljedećim kodom:
`import { BrowserRouter as Router, Route } iz 'react-router-dom'`

3. Kreirajte komponentu rute:
Zatim kreirajte komponentu rute koja će prikazati stranicu kada korisnik posjeti navedenu stazu. Na primjer, ako želite prikazati stranicu kada neko posjeti /home u vašoj aplikaciji, možete koristiti sljedeći kod:
``

4. Zamotajte svoju aplikaciju s komponentom rutera:
Konačno, omotajte svoju aplikaciju komponentom rutera tako da će sve vaše rute biti ispravno prikazane. To možete učiniti korištenjem sljedećeg koda u vašoj osnovnoj datoteci (obično index.js): ` `.