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. "
4. "
5. "
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
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): `