ในแอปพลิเคชัน React การจัดรูปแบบ URL และ routing มีบทบาทสำคัญในการนำทางเพจและแสดงเนื้อหาที่เกี่ยวข้อง ในการจัดการ routing ใน React เราสามารถใช้ ไลบรารี่ นี่คือคำแนะนำพื้นฐานเกี่ยวกับวิธีใช้ เพื่อจัดรูปแบบ URL และจัดการ ในแอปพลิเคชัน React ของคุณ React Router React Router routing
ติดตั้ง React Router
เปิดไดเร็กทอรีโปรเจ็กต์ของคุณในเทอร์มินัลแล้วรันคำสั่งต่อไปนี้เพื่อติดตั้ง: React Router npm install react-router-dom
นำเข้าส่วนประกอบที่จำเป็นจาก ส่วนประกอบ React ของคุณ React Router
กำหนดเส้นทาง
ใช้ คอมโพเนนต์เพื่อรวมแอปพลิเคชัน React ของคุณและตั้งค่ารูปแบบ URL พื้นฐาน <BrowserRouter>
ใช้ <Route>
ส่วนประกอบเพื่อกำหนดเส้นทางในแอปพลิเคชันของคุณ
ตัวอย่าง:
กำหนด Link s
ใช้ ส่วนประกอบเพื่อสร้างการนำทาง ในแอปพลิเคชันของคุณ <Link>
link
ตัวอย่าง:
เข้าถึงพารามิเตอร์เส้นทาง
ใช้ <Route>
คอมโพเนนต์ที่มี path
แอตทริบิวต์ในรูปแบบ /users/:id
เพื่อเข้าถึงพารามิเตอร์พาธ
ภายในส่วนประกอบที่กำหนดโดย <Route>
คุณสามารถใช้ useParams()
เพื่อเข้าถึงค่าของพารามิเตอร์พาธ
ตัวอย่าง:
ใช้ Switch และ Redirect
ใช้ คอมโพเนนต์เพื่อแสดงเส้นทางแรกที่ตรงกับเส้นทางเท่านั้น <Switch>
ใช้ คอมโพเนนต์กับ ผู้ใช้จากพาธหนึ่งไปยังอีกพาธหนึ่ง <Redirect>
redirect
ตัวอย่าง:
นี่คือแนวคิดพื้นฐานของการจัดรูปแบบ URL และ routing ใน React โดยใช้. เมื่อใช้ คุณสามารถสร้างแอปพลิเคชัน React ที่ยืดหยุ่นพร้อมความสามารถในการนำทางและแสดงเนื้อหาต่างๆ ตาม URL React Router React Router