แก้ไขแล้ว: ตอบสนองพารามิเตอร์ URL ของเราเตอร์

ปัญหาหลักที่เกี่ยวข้องกับ React Router URL params คืออาจใช้งานยากในเส้นทางไดนามิก เนื่องจากพารามิเตอร์ URL เป็นแบบคงที่และไม่สามารถเปลี่ยนแปลงได้หลังจากสร้างเส้นทางแล้ว ซึ่งหมายความว่าหากผู้ใช้ต้องการเข้าถึงหน้าเว็บอื่นด้วยพารามิเตอร์ที่แตกต่างกัน พวกเขาจะต้องสร้างเส้นทางใหม่สำหรับชุดค่าผสมแต่ละพารามิเตอร์ นอกจากนี้ เมื่อใช้พารามิเตอร์ URL อาจเป็นเรื่องยากที่จะติดตามชุดค่าผสมที่เป็นไปได้ทั้งหมด และตรวจสอบให้แน่ใจว่าเราเตอร์จัดการชุดค่าผสมแต่ละชุดอย่างเหมาะสม

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

รหัสนี้กำลังตั้งค่า React Router เพื่อแสดงผลเพจด้วยชื่อผู้ใช้จาก URL

1. บรรทัดแรกนำเข้าส่วนประกอบจากไลบรารี React Router DOM
2. ฟังก์ชัน App ส่งคืนส่วนประกอบ Router ที่มีส่วนประกอบ Route อยู่ภายใน ซึ่งระบุว่า URL ใดๆ ที่ขึ้นต้นด้วย “/user/” ควรแสดงส่วนประกอบ UserPage
3. ฟังก์ชัน UserPage ใช้ useParams() เพื่อรับชื่อผู้ใช้จาก URL แล้วแสดงคำทักทายโดยใช้ชื่อผู้ใช้นั้น

พารามิเตอร์ URL

พารามิเตอร์ URL ใน React Router คือชิ้นส่วนของข้อมูลที่ส่งผ่านไปยังเส้นทางโดยเป็นส่วนหนึ่งของ URL พวกเขาอนุญาตให้นักพัฒนาส่งข้อมูลแบบไดนามิกไปยังเส้นทาง เช่น ID หรือสตริงข้อความค้นหา สามารถใช้เพื่อสร้างเส้นทางแบบไดนามิกที่สามารถใช้สำหรับสิ่งต่าง ๆ เช่นการแสดงรายการเฉพาะจากฐานข้อมูลหรือการกรองเนื้อหาตามอินพุตของผู้ใช้ React Router มีเครื่องมือสำหรับการเข้าถึงและจัดการพารามิเตอร์ URL ทำให้ง่ายต่อการใช้งานในแอปพลิเคชันของคุณ

คุณจะรับพารามิเตอร์ URL จากเส้นทางใน React ได้อย่างไร

ใน React Router คุณสามารถเข้าถึง URL params จากเส้นทางโดยใช้ useParams hook hook นี้ส่งคืนวัตถุที่มีคู่คีย์-ค่าของพารามิเตอร์ URL ตัวอย่างเช่น หากเส้นทางของคุณคือ /user/:id คุณสามารถเข้าถึงพารามิเตอร์ id ด้วย useParams().id