Hlavním problémem souvisejícím se stahováním React Router DOM je to, že může být obtížné jej nakonfigurovat a nastavit. React Router DOM vyžaduje spoustu konfigurace a nastavení, což může být časově náročné a složité pro vývojáře, kteří s knihovnou začínají. React Router DOM se navíc neustále vyvíjí, takže vývojáři musí zůstat v aktuálním stavu s nejnovější verzí, aby byla zajištěna kompatibilita s jejich aplikacemi.
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} z 'react-router-dom';“ – Tento řádek importuje komponenty BrowserRouter a Route z knihovny respond-router-dom.
2. “ReactDOM.render(” – Tento řádek volá renderovací metodu ReactDOM, aby vykreslil prvek React do DOM v dodaném kontejneru a vrátil odkaz na komponentu (nebo vrátí hodnotu null pro bezstavové komponenty).
3. "
4. "
5. "
Komponenta aplikace může být jakákoli komponenta React, kterou jsme definovali jinde v naší kódové základně nebo importovali z jiné knihovny nebo balíčku, jako je Material UI nebo Bootstrap atd…
6. „“ – Toto je uzavírací značka pro komponentu trasy, která byla otevřena na řádku 4 výše, uzavírá tuto konkrétní definici trasy, aby bylo možné v případě potřeby později přidat další trasy do naší kódové základny, aniž by to ovlivnilo funkčnost nebo chování této .
7. „“ – Toto je uzavírací značka pro komponentu Router, která byla otevřena na řádku 3 výše, uzavírá tuto konkrétní definici routeru, takže v případě potřeby lze později v naší kódové základně přidat další routery, aniž by to ovlivnilo funkčnost nebo chování tohoto routeru. ..
8.”document.getElementById('root'));” – Nakonec předáme dokument getElementById('root') jako argument vykreslovací metodě ReactDOM, která jí řekne, kam přesně chceme připojit/vykreslit aplikaci uvnitř stromu DOM (v tomto případě uvnitř prvku s id=” vykořenit").
balíček reakce-router-dom
React Router je oblíbená směrovací knihovna pro React. Poskytuje výkonné, snadno použitelné rozhraní API pro správu tras aplikací a navigaci. Balíček react-router-dom je oficiální verzí React Router pro webové aplikace. Poskytuje komponenty jako např si
Jak stáhnout Reagovat router dom Příklad kódu
1. Nainstalujte React Router Dom:
V adresáři projektu spusťte následující příkaz k instalaci React Router Dom:
`npm install reagovat-router-dom`
2. Importovat React Router Dom:
Jakmile nainstalujete React Router Dom, můžete jej importovat do svého projektu pomocí následujícího kódu:
`importovat { BrowserRouter as Router, Route } z 'react-router-dom'`
3. Vytvořte komponentu trasy:
Dále vytvořte komponentu trasy, která vykreslí stránku, když uživatel navštíví zadanou cestu. Pokud například chcete vykreslit stránku, když někdo navštíví /home ve vaší aplikaci, můžete použít následující kód:
`
4. Zabalte svou aplikaci komponentou směrovače:
Nakonec aplikaci zabalte do součásti routeru, aby se všechny vaše trasy vykreslovaly správně. Můžete to provést pomocí následujícího kódu v kořenovém souboru (obvykle index.js): `