Asiakaspuolen reititys React Routerissa

Tällä oppitunnilla tarkastelemme tärkeää yksisivuisten (SPA) sovellusten osaa - asiakaspuolen reititystä. Tällainen reititys mahdollistaa URL-osoitteen päivittämisen selaimessa ilman lisäpyyntöjä dokumentille palvelimelta.

Käynnistä sovellus, jonka loimme edellisellä oppitunnilla. Avaa kehittäjäpaneeli ja sieltä välilehti 'Verkko' (Network Chromelle). Jokaisen napsautuksen jälkeen linkeihimme näemme joka kerta pyynnön dokumentille. Eli pyydämme palvelinta lataamaan meille dokumentin joka kerta.

Hyödynnetään nyt React Routerin etuja päästäksemme eroon tällaisista pyynnöistä. Avaa tätä varten root.jsx sovellustamme ja korvaa a -tagi komponentilla Link. Aluksi lisätään sen import:

import { Outlet, Link } from 'react-router-dom';

Korvaa nyt a -tagit, joissa on attribuutti href. Koodinpalan sijasta:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Meillä on nyt seuraava koodi:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Avaa jälleen välilehti 'Verkko' kehittäjäpaneelissa, aseta osoiteriville juuripolku ja päivitä sivu. Nyt napsauta linkkejä ja näemme, että dokumenttia pyydettiin vain kerran alkuperäisen latauksen yhteydessä, eikä myöhemmissä napsautuksissa ole enää pyyntöä palvelimelle.

Ota sovellus, jonka loit aiemmissa oppituntien tehtävissä. Hyödynnä oppitunnin materiaaleja ja toteuta siihen asiakaspuolen reititys muuntamalla linkkisi kuten oppitunnilla on kuvattu.