แก้ไขแล้ว: ส่งข้อมูลนำทางตอบสนองเราเตอร์ dom

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

import { useHistory } from "react-router-dom";

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// บรรทัดที่ 1: บรรทัดนี้นำเข้า useHistory hook จากไลบรารี react-router-dom
// บรรทัดที่ 3: บรรทัดนี้ประกาศค่าคงที่ที่เรียกว่า MyComponent ซึ่งเป็นฟังก์ชันที่คืนค่า JSX
// บรรทัดที่ 4: บรรทัดนี้ประกาศค่าคงที่ที่เรียกว่า history ซึ่งกำหนดให้กับ useHistory hook ที่นำเข้าจาก react-router-dom
// บรรทัดที่ 6: บรรทัดนี้ประกาศฟังก์ชันชื่อ handleClick ซึ่งรับข้อมูลพารามิเตอร์เดียว
// บรรทัดที่ 7: บรรทัดนี้ใช้ออบเจกต์ประวัติเพื่อพุชเส้นทางใหม่ไปยังสแต็กที่มีชื่อพาธ '/myroute' และข้อมูลสถานะที่ส่งผ่านเป็นออบเจกต์
// บรรทัดที่ 9 – 11: บรรทัดเหล่านี้ส่งคืน JSX ที่มีอิลิเมนต์ปุ่มพร้อมตัวจัดการเหตุการณ์ onClick ที่เรียก handleClick และส่งผ่านข้อมูลเป็นอาร์กิวเมนต์

ตอบสนองเราเตอร์ Dom

React Router DOM เป็นไลบรารีการกำหนดเส้นทางสำหรับ React ที่ช่วยให้นักพัฒนาสามารถสร้างและจัดการเส้นทางภายในแอปพลิเคชัน React ของตนได้ มีองค์ประกอบหลักที่จำเป็นในการสร้างเว็บแอปพลิเคชันที่ซับซ้อนและมีหลายหน้าด้วย React รวมถึงส่วนประกอบเช่น Link, Route, Switch และ BrowserRouter นอกจากนี้ยังมีคุณสมบัติต่างๆ เช่น การจับคู่เส้นทางแบบไดนามิกและการติดตามตำแหน่ง ด้วย React Router DOM นักพัฒนาสามารถสร้างแอปพลิเคชันหน้าเดียวที่มีหลายมุมมองและหลายเส้นทางโดยไม่ต้องจัดการ URL หรือประวัติเบราว์เซอร์ด้วยตนเอง

คุณจะส่งข้อมูลผ่านการนำทางใน react-router-Dom ได้อย่างไร

ใน React Router ข้อมูลสามารถส่งผ่านการนำทางโดยใช้วัตถุสถานะของ API ประวัติ วัตถุสถานะสามารถเข้าถึงได้ผ่านอุปกรณ์ประกอบฉากของส่วนประกอบใด ๆ ที่แสดงผลโดย a ส่วนประกอบ. ในการส่งข้อมูล คุณสามารถเพิ่มไปยังวัตถุสถานะเมื่อเรียกใช้ฟังก์ชันการนำทาง ตัวอย่างเช่น:

const { ประวัติ } = this.props;
ประวัติศาสตร์.ผลักดัน({
ชื่อพาธ: '/some/path',
สถานะ: { someData: 'data' }
});