Hovedproblemet knyttet til nedlasting av React Router DOM er at det kan være vanskelig å konfigurere og sette opp. React Router DOM krever mye konfigurasjon og oppsett, noe som kan være tidkrevende og komplekst for utviklere som er nye i biblioteket. I tillegg er React Router DOM i stadig utvikling, så utviklere må holde seg oppdatert med den nyeste versjonen for å sikre kompatibilitet med applikasjonene deres.
import { BrowserRouter as Router, Route } from "react-router-dom"; ReactDOM.render( <Router> <Route path="/"> <App /> </Route> </Router>, document.getElementById('root'));
1. "importer { BrowserRouter som ruter, rute } fra 'react-router-dom';" – Denne linjen importerer BrowserRouter- og Route-komponentene fra react-router-dom-biblioteket.
2. “ReactDOM.render(” – Denne linjen kaller ReactDOM render-metoden for å gjengi et React-element inn i DOM-en i den medfølgende beholderen og returnere en referanse til komponenten (eller returnerer null for tilstandsløse komponenter).
3. '
4. '
5. '
App-komponenten kan være en hvilken som helst React-komponent vi har definert andre steder i kodebasen vår eller importert fra et annet bibliotek eller en annen pakke som Material UI eller Bootstrap osv...
6. “” – Dette er en avslutningskode for rutekomponenten som ble åpnet på linje 4 ovenfor, den stenger denne spesielle rutedefinisjonen slik at andre ruter kan legges til om nødvendig senere i kodebasen vår uten å påvirke dennes funksjonalitet eller oppførsel .
7. “” – Dette er en avslutningskode for ruterkomponenten som ble åpnet på linje 3 ovenfor, den stenger denne spesielle ruterdefinisjonen slik at andre rutere kan legges til om nødvendig senere i kodebasen vår uten å påvirke dennes funksjonalitet eller oppførsel ..
8."document.getElementById('root'));" – Til slutt sender vi inn dokumentet getElementById('root') som et argument til ReactDOM-gjengivelsesmetoden som forteller den nøyaktig hvor vi ønsker å montere/rendere ut app inne i DOM-treet (i dette tilfellet inne i et element med id=” rot").
react-router-dom-pakke
React Router er et populært rutebibliotek for React. Den gir en kraftig, brukervennlig API for administrasjon av applikasjonsruter og navigering. React-router-dom-pakken er den offisielle versjonen av React Router for nettapplikasjoner. Det gir komponenter som f.eks og
hvordan laste ned react router dom Code Eksempel
1. Installer React Router Dom:
I prosjektkatalogen din, kjør følgende kommando for å installere React Router Dom:
`npm install react-router-dom`
2. Importer React Router Dom:
Når du har installert React Router Dom, kan du importere den til prosjektet ditt med følgende kode:
`importer { BrowserRouter som ruter, rute } fra 'react-router-dom'`
3. Opprett en rutekomponent:
Deretter oppretter du en rutekomponent som vil gjengi siden når en bruker besøker den angitte banen. Hvis du for eksempel ønsker å gjengi en side når noen besøker /home i applikasjonen din, kan du bruke følgende kode:
`
4. Pakk inn appen din med ruterkomponent:
Til slutt, pakk inn appen din med ruterkomponenten slik at alle rutene dine blir riktig gjengitt. Du kan gjøre dette ved å bruke følgende kode i rotfilen din (vanligvis index.js): `