Rroutimi në anën e klientit në React Router

Në këtë mësim do të shqyrtojmë një komponentë të rëndësishëm të aplikacioneve me një faqe (SPA) - rroutimin në anën e klientit. Ky rroutim na lejon të përditësojmë URL në shfletues pa kërkesa shtesë për dokument nga serveri.

Nisni aplikacionin që krijuam në mësimin e kaluar. Hapni panelin e zhvilluesit dhe në të skedën 'Rrjeti' (Network për Chrome). Pas çdo klikimi në lidhjet tona ne shohim çdo herë një kërkesë për document. Kjo do të thotë ne çdo herë i kërkojmë serverit të na ngarkoj document.

Le të përfitojmë tani nga përparësitë e React Router, për të hequr qafe kërkesa të tilla. Për këtë, le të hapim root.jsx të aplikacionit tonë dhe të zëvendësojmë tagun a të shënuarit me komponentin Link. Për fillim le të shtojmë importin e tij:

routes/root.jsximport { Outlet, Link } from 'react-router-dom';

Tani le të zëvendësojmë taget a me atributin href. Në vend të pjesës së kodit:

routes/root.jsx<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Tani do të kemi kodin e mëposhtëm:

routes/root.jsx<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Përsëri hapni skedën 'Rrjeti' në panelin e zhvilluesit, në shiritin e adresave vendosni shtegun rrënjë dhe rifreskoni faqen. Tani klikoni në lidhjet dhe shihni se document u kërkua vetëm një herë gjatë ngarkimit fillestar dhe në klikimet pasuese nuk ka më kërkesë në server.