การกำหนดเส้นทางฝั่งไคลเอ็นต์ใน React Router
ในบทเรียนนี้ เราจะพิจารณาองค์ประกอบที่สำคัญ ของแอปพลิเคชันหน้าเดียว (SPA) - การกำหนดเส้นทางฝั่งไคลเอ็นต์ การกำหนดเส้นทางดังกล่าว ทำให้เราสามารถอัปเดต URL ในเบราว์เซอร์ได้โดยไม่ต้อง ร้องขอเอกสารเพิ่มเติม จากเซิร์ฟเวอร์
เริ่มแอปพลิเคชันที่เราสร้างไว้ใน
บทเรียนที่แล้ว เปิดแผงผู้พัฒนาและ
ในนั้นให้เปิดแท็บ 'เครือข่าย' (Network สำหรับ Chrome)
หลังจากคลิกลิงก์ของเราทุกครั้ง เรา
จะเห็นคำขอสำหรับ document ทุกครั้ง นั่นคือ
เราขอให้เซิร์ฟเวอร์โหลด document
ให้เราทุกครั้ง
ตอนนี้เรามาใช้ประโยชน์จาก
React Router เพื่อกำจัดคำขอ
ดังกล่าวกัน สำหรับสิ่งนี้ให้เปิดไฟล์ root.jsx
ของแอปพลิเคชันของเราและแทนที่แท็ก a
ของ markup ด้วยคอมโพเนนต์ Link เริ่มต้น
ให้เพิ่มการนำเข้า:
import { Outlet, Link } from 'react-router-dom';
ตอนนี้ให้แทนที่แท็ก a พร้อมแอตทริบิวต์
href แทนที่ส่วนโค้ด:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
ตอนนี้เราจะมีโค้ดต่อไปนี้:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
เปิดแท็บ 'เครือข่าย' บน
แผงผู้พัฒนาอีกครั้ง ในแถบที่อยู่
ให้กำหนดเส้นทางรูทและรีเฟรช
หน้าเว็บ ตอนนี้คลิกลิงก์
แล้วจะเห็นว่า document ของเราถูกขอ
เพียงครั้งเดียวตอนโหลดครั้งแรก
และการคลิกครั้งต่อๆ ไปก็ไม่มีการร้องขอไปยัง
เซิร์ฟเวอร์อีกแล้ว
นำแอปพลิเคชันที่คุณสร้างไว้ใน แบบฝึกหัดของบทเรียนที่แล้วมา ใช้ เนื้อหาของบทเรียน ปรับใช้ การกำหนดเส้นทางฝั่งไคลเอ็นต์ในนั้น โดยปรับเปลี่ยนลิงก์ของคุณตามที่อธิบายไว้ ในบทเรียน
