Olemme perehtyneet React Routerin peruskäsitteisiin, joka on keskeinen kirjasto reititystoiminnallisuuden lisäämiseksi React-sovelluksiin. Kertaan tässä keskeiset käsitellyt asiat:

Asennus

Ensimmäinen vaihe on asentaa React Router -kirjasto projektiisi. Tämä onnistuu suorittamalla seuraava komento projektihakemistossa:

npm install react-router-dom

Tarvittavien komponenttien tuonti

Sinun tulee tuoda tarvittavat komponentit react-router-dom-paketista komponenttitiedostoihisi. Näihin komponentteihin kuuluvat BrowserRouter, Route, Routes, Link, NavLink. Nämä komponentit muodostavat reittien luomisen ja hallinnan perustan.

BrowserRouterin käyttöönotto

Ota reititystoiminnallisuus käyttöön kietomalla juurikomponentti BrowserRouter-komponenttiin. Tämä vaihe alustaa reititysjärjestelmän ja mahdollistaa navigoinnin URL-osoitteen perusteella.

Reittien määrittely

App-komponentin (tai muun sopivan komponentin) sisällä voit määritellä reitit käyttämällä Route- ja Routes-komponentteja. Route-komponentti liittää tietyn polun siihen liitettyyn komponenttiin, joka renderöidään, kun polku vastaa nykyistä URL-osoitetta. Tämä määrittää sovelluksen navigaation rakenteen ja toiminnan.

Lazy loading ja Suspense

Sovelluksen suorituskyvyn optimoimiseksi voit toteuttaa koodin jakamisen ja komponenttien lazy loadingin. Tämä tehdään käyttämällä Reactin lazy-funktiota ja kietomalla tuotu komponentti Suspense-komponenttiin. Lazy loading varmistaa, että komponentit ladataan asynkronisesti tarpeen mukaan, mikä parantaa sovelluksen alkuperäistä latausaikaa.

Linkkien luominen

Voit luoda navigointilinkkejä sovellukseesi käyttämällä Link- tai NavLink-komponenttia. Link-komponenttia käytetään siirtymiseen tiettyyn reittiin ilman koko sivun uudelleenlatausta. Tämä takaa sujuvamman ja tehokkaamman käyttökokemuksen.