Hlavným problémom súvisiacim so sťahovaním React Router DOM je to, že môže byť ťažké ho nakonfigurovať a nastaviť. React Router DOM vyžaduje veľa konfigurácie a nastavenia, čo môže byť časovo náročné a zložité pre vývojárov, ktorí sú s knižnicou noví. Okrem toho sa React Router DOM neustále vyvíja, takže vývojári musia zostať v obraze s najnovšou verziou, aby bola zabezpečená kompatibilita s ich aplikáciami.
import { BrowserRouter as Router, Route } from "react-router-dom"; ReactDOM.render( <Router> <Route path="/"> <App /> </Route> </Router>, document.getElementById('root'));
1. „importovať { BrowserRouter as Router, Route} z 'react-router-dom';“ – Tento riadok importuje komponenty BrowserRouter a Route z knižnice respond-router-dom.
2. “ReactDOM.render(” – Tento riadok volá metódu vykresľovania ReactDOM, aby vykreslil prvok React do DOM v dodanom kontajneri a vrátil odkaz na komponent (alebo vráti hodnotu null pre bezstavové komponenty).
3. "
4. "
5. "
Komponent App môže byť akýkoľvek komponent React, ktorý sme definovali inde v našej kódovej základni alebo importovali z inej knižnice alebo balíka, ako je Material UI alebo Bootstrap atď…
6. „“ – Toto je uzatváracia značka pre komponent trasy, ktorý bol otvorený v riadku 4 vyššie, uzatvára túto konkrétnu definíciu trasy, aby bolo možné v prípade potreby neskôr pridať ďalšie trasy do našej kódovej základne bez ovplyvnenia funkčnosti alebo správania tejto .
7. „“ – Toto je uzatváracia značka pre komponent smerovača, ktorý bol otvorený v riadku 3 vyššie, uzatvára túto konkrétnu definíciu smerovača, aby bolo možné v prípade potreby neskôr pridať ďalšie smerovače do našej kódovej základne bez toho, aby to ovplyvnilo funkčnosť alebo správanie tohto smerovača. ..
8.”document.getElementById('root'));” – Nakoniec odovzdáme dokument getElementById('root') ako argument metóde vykresľovania ReactDOM, ktorá jej povie, kde presne chceme pripojiť/vykresliť aplikáciu v rámci stromu DOM (v tomto prípade vnútri prvku s id=” koreň“).
balík reag-router-dom
React Router je populárna smerovacia knižnica pre React. Poskytuje výkonné a ľahko použiteľné API na správu trás aplikácií a navigáciu. Balík react-router-dom je oficiálna verzia React Router pre webové aplikácie. Poskytuje komponenty ako napr a
ako stiahnuť reakciu router dom Príklad kódu
1. Nainštalujte React Router Dom:
V adresári projektu spustite nasledujúci príkaz na inštaláciu React Router Dom:
`npm install reagovat-router-dom`
2. Importovať React Router Dom:
Po nainštalovaní React Router Dom ho môžete importovať do svojho projektu pomocou nasledujúceho kódu:
`importovať { BrowserRouter as Router, Route } z 'react-router-dom'`
3. Vytvorte komponent trasy:
Ďalej vytvorte komponent trasy, ktorý vykreslí stránku, keď používateľ navštívi zadanú cestu. Napríklad, ak chcete vykresliť stránku, keď niekto navštívi /home vo vašej aplikácii, môžete použiť nasledujúci kód:
`
4. Zabaľte svoju aplikáciu komponentom smerovača:
Nakoniec zabaľte svoju aplikáciu do komponentu smerovača, aby sa všetky vaše trasy vykreslili správne. Môžete to urobiť pomocou nasledujúceho kódu vo vašom koreňovom súbore (zvyčajne index.js): `