Riješeno: preuzimanje react rutera dom

Glavni problem vezan uz preuzimanje React Router DOM-a je to što može biti teško konfigurirati i postaviti. React Router DOM zahtijeva mnogo konfiguracije i postavljanja, što može biti dugotrajno i složeno za programere koji su novi u knjižnici. Dodatno, React Router DOM neprestano se razvija, tako da programeri moraju biti u tijeku s 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 } from 'react-router-dom';” – Ovaj redak uvozi komponente BrowserRouter i Route iz biblioteke react-router-dom.

2. “ReactDOM.render(” – Ovaj redak poziva ReactDOM render metodu za renderiranje React elementa u DOM u isporučenom spremniku i vraća referencu na komponentu (ili vraća null za komponente bez stanja).

3. "” – Ovo je početna oznaka za komponentu usmjerivača koja će se koristiti za omotavanje svih naših ruta kako bi se omogućila funkcionalnost usmjeravanja 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 postavljenim na '/'.

5. "” – Ovo je samozatvarajuća oznaka koja renderira komponentu aplikacije u naše DOM stablo kada ovoj ruti odgovara react ruter dom.
Komponenta aplikacije može biti bilo koja React komponenta koju smo definirali negdje drugdje u našoj bazi kodova ili uvezena 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 u retku 4 iznad, zatvara ovu konkretnu definiciju rute tako da se druge rute mogu dodati po potrebi kasnije u našu bazu kodova bez utjecaja na funkcionalnost ili ponašanje ove. .

7. “” – Ovo je oznaka za zatvaranje komponente usmjerivača koja je otvorena u retku 3 iznad, zatvara definiciju ovog usmjerivača tako da se drugi usmjerivači mogu dodati ako je potrebno kasnije u našoj bazi kodova bez utjecaja na funkcionalnost ili ponašanje ovog. ..

8.”document.getElementById('root'));” – Konačno, prosljeđujemo dokument getElementById('root') kao argument ReactDOM render metodi koja joj govori gdje točno želimo montirati/renderirati aplikaciju unutar DOM stabla (u ovom slučaju unutar elementa s id=” korijen").

react-router-dom paket

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

kako preuzeti react router dom Primjer koda

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

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

3. Napravite komponentu rute:
Zatim izradite komponentu rute koja će prikazati stranicu kada korisnik posjeti navedeni put. Na primjer, ako želite prikazati stranicu kada netko posjeti /home u vašoj aplikaciji, možete koristiti sljedeći kod:
``

4. Omotajte svoju aplikaciju komponentom usmjerivača:
Na kraju, omotajte svoju aplikaciju komponentom usmjerivača kako bi sve vaše rute bile ispravno prikazane. To možete učiniti pomoću sljedećeg koda u svojoj korijenskoj datoteci (obično index.js): ` `.

Povezani postovi:

Ostavite komentar