Summary  
This chapter shows how to configure client-side routing by adding a new route and updating navigation links while integrating a corresponding view component to render dynamic data.

General domain of usage  
Single-page web application navigation

Pysähdytään hetkeksi tarkastelemaan sovelluksemme viimeisimpiä muutoksia:
- **Uusi reitti**: Olemme lisänneet `/products`-reitin tiedostoon `App.jsx` luodaksemme "Products"-sivun, mikä laajentaa sovelluksen toiminnallisuutta;
- **Paranneltu navigointi**: Navigaatio tiedostossa `Bar.jsx` sisältää nyt linkin "Products"-sivulle, mikä helpottaa käyttäjiä pääsemään tähän uuteen näkymään;
- **`ProductsPage`-komponentti**: "Products"-sivun ydin on `ProductsPage`-komponentti. Se renderöi ja hallinnoi tuotedataa tarjoten interaktiivisen käyttökokemuksen.

Tutustu koko sovellukseen mukana toimitetussa Code Sandboxissa nähdäksesi nämä päivitykset käytännössä.

Opi hallitsemaan navigointia React-sovelluksissa käyttämällä React Routeria. Ymmärrä URL-osoitteiden rakenne ja reitityksen merkitys verkkosovelluksissa. Ota käyttöön React Router monisivuisen sovelluksen luomiseksi, jossa dynaaminen sisältö perustuu URL-polkuun. Hyödynnä edistyneitä ominaisuuksia, kuten kyselymerkkijonoja ja URL-parametreja, sovelluksen tilan ja käyttäjän navigoinnin hallintaan.

Opi teoreettiset perusteet käsitteille kuten URL, verkkotunnus, protokolla, kyselyparametrit ja muut. Ymmärrä reitityksen merkitys verkkosovelluksissa sekä syyt React Router -kirjaston tarpeellisuudelle.

Opi luomaan kokonainen React-sovellus alusta alkaen, jossa sisällön näyttäminen mukautuu URL-osoitteen perusteella React Router -toiminnallisuuden avulla.

Perehdy kyselymerkkijonojen käyttöön sovelluksen tilan jakamisessa ja hallinnassa URL-osoitteiden kautta, työskentele erilaisten tietotyyppien kanssa kyselyparametreissa sekä hyödynnä React Routeria navigointiin ja URL-muutoksiin perustuvien vaikutusten hallintaan.

Viimeaikaisten Muutosten Tarkastelu