Penghalaan Pihak Pelanggan dalam React Router

Dalam pelajaran ini, kita akan melihat satu komponen penting aplikasi satu halaman (SPA) - penghalaan pihak pelanggan. Penghalaan sedemikian membolehkan kita mengemas kini URL dalam pelayar tanpa permintaan tambahan untuk dokumen dari pelayan.

Lancarkan aplikasi yang kami bina dalam pelajaran lepas. Buka panel pemaju dan dalamnya tab 'Rangkaian' (Network untuk Chrome). Selepas setiap klik pada pautan kami, kami melihat permintaan untuk document setiap kali. Iaitu, setiap kali kami meminta pelayan untuk memuatkan document untuk kami.

Sekarang mari kita gunakan kelebihan React Router untuk menghilangkan permintaan seperti itu. Untuk melakukan ini, buka root.jsx aplikasi kami dan gantikan tag a tanda dengan komponen Link. Untuk permulaan, tambahkan importnya:

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

Sekarang gantikan tag a dengan atribut href. Daripada coretan kod:

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

Sekarang kami akan mempunyai kod berikut:

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

Buka semula tab 'Rangkaian' pada panel pemaju, dalam bar alamat tetapkan laluan akar dan muat semula halaman. Sekarang klik pada pautan dan lihat bahawa document kami diminta hanya sekali semasa pemuatan awal dan pada klik berikutnya tiada permintaan kepada pelayan lagi.

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, laksanakan di dalamnya penghalaan pihak pelanggan, dengan mengubah suai pautan anda, seperti yang diterangkan dalam pelajaran.