Perutean Sisi Klien di React Router

Pada pelajaran ini, kita akan membahas komponen penting dari aplikasi Single-Page (SPA) - perutean sisi klien. Perutean seperti ini memungkinkan kita untuk memperbarui URL di browser tanpa permintaan tambahan untuk dokumen dari server.

Jalankan aplikasi yang kita buat pada pelajaran sebelumnya. Buka panel pengembang dan di dalamnya buka tab 'Jaringan' (Network untuk Chrome). Setelah setiap klik pada tautan kami, kita melihat setiap kali ada permintaan untuk document. Artinya kita setiap kali meminta server untuk memuatkan document untuk kita.

Sekarang mari kita manfaatkan keunggulan React Router untuk menghilangkan permintaan seperti itu. Untuk melakukannya, buka root.jsx aplikasi kita dan ganti tag a pada markup dengan komponen Link. Untuk awalnya, tambahkan impor-nya:

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

Sekarang ganti tag a dengan atribut href. Alih-alih potongan kode:

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

Sekarang kita akan memiliki kode berikut:

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

Buka lagi tab 'Jaringan' di panel pengembang, pada bilah alatur setel jalur root dan segarkan halamannya. Sekarang klik pada tautan dan kita lihat bahwa document kita diminta hanya satu kali saat pemuatan awal dan pada klik berikutnya tidak ada lagi permintaan ke server.

Ambil aplikasi yang Anda buat di tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, implementasikan di dalamnya perutean sisi klien, dengan mengubah tautan Anda, seperti dijelaskan dalam pelajaran.