React Router

Seuraavaksi asennamme projektiin ensimmäisen npm-paketin, jota tulemme hyödyntämään. Tämä paketti on React Router, se osaa käsitellä selaimen tekemät sivupyynnöt ja päivittämään selaimen näkymän vastaamaan selaimessa olevaa osoitetta.

React Routerin viralliset kotisivut löytyvät osoitteesta https://reactrouter.com/, samasta paikasta löytyy myös hyvin kattava dokumentaatio paketin käytöstä. React Router tarjoaa paljon erilaisia ominaisuuksia, joista tämän projektin puitteissa hyödynnämme ainoastaan pientä osaa.

Käytämme React Routerista tämän materiaalin kirjoitushetken versiota, jotta se varmasti toimii käytettävän React-version kanssa.

1. Keskeytä komentorivillä oleva kehitysympäristö näppäinyhdistelmällä Ctrl + C.

2. Varmista, että olet projektikansiossa ja anna komentorivillä komento:

   npm install react-router-dom@6.11.2
   

   Pienen odottelun jälkeen npm saa asennettua paketin ja kaikki siihen liittyvät alipaketit. Onnistuneen asennuksen jälkeen ruulla on seuraavat tekstit:

   added 3 packages, and audited 244 packages in 9s
   
   81 packages are looking for funding
   run `npm fund` for details
   
   found 0 vulnerabilities
   

   Viimeisellä rivillä olevien haavoittuvuuksien määrä voi olla eri, mahdollisista haavoittuvuuksista ei kannata välittää.

3. Käynnistä kehitysympäristö uudelleen komennolla:

   npm run dev
   

Näiden vaiheiden jälkeen projektiin on asennettu React Router -paketti. Seuraavaksi hyödynnetään tätä pakettia ohjelmakoodissa.