แก้ไขแล้ว: ส่งข้อมูลในประวัติเราเตอร์ตอบสนอง%2Cpush

ปัญหาหลักที่เกี่ยวข้องกับการส่งข้อมูลในประวัติเราเตอร์แบบโต้ตอบ พุชคือข้อมูลไม่คงอยู่ตลอดการรีเฟรชหน้า เมื่อผู้ใช้รีเฟรชหน้า ข้อมูลที่จัดเก็บไว้ใน history.push จะสูญหายและจะไม่สามารถใช้ได้ในการโหลดหน้าครั้งต่อไป สิ่งนี้สามารถนำไปสู่พฤติกรรมที่ไม่คาดคิดและอาจทำให้เกิดปัญหาเมื่อพยายามเข้าถึงหรือเก็บข้อมูลจากการโหลดหน้าก่อนหน้า

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

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

  const handleClick = (data) => {
    history.push({ pathname: "/mypage", state: data });
  };

  return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};

1. บรรทัดนี้นำเข้า useHistory hook จากไลบรารี react-router-dom ซึ่งให้การเข้าถึงวัตถุประวัติที่ติดตามตำแหน่งปัจจุบันในแอป

2. บรรทัดนี้ประกาศองค์ประกอบการทำงานที่เรียกว่า MyComponent และกำหนดให้กับตัวแปรคงที่

3. บรรทัดนี้ใช้ hook ของ useHistory ที่นำเข้าในบรรทัดที่ 1 เพื่อเข้าถึงออบเจกต์ประวัติและกำหนดให้กับตัวแปรคงที่ที่เรียกว่า history

4. บรรทัดนี้ประกาศฟังก์ชันชื่อ handleClick ที่รับอาร์กิวเมนต์ที่เรียกว่า data และผลักวัตถุที่มีชื่อพาธและคุณสมบัติสถานะไปยังกองประวัติโดยใช้ history.push()

5. บรรทัดนี้ส่งคืนองค์ประกอบปุ่มด้วยตัวจัดการเหตุการณ์ onClick ที่เรียก handleClick() พร้อมกับวัตถุที่มี someData เป็นอาร์กิวเมนต์เมื่อผู้ใช้คลิก

ผลักดันประวัติศาสตร์

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

ฉันจะใช้ประวัติในเราเตอร์ตอบสนองได้อย่างไร

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

หากต้องการใช้ประวัติใน React Router คุณต้องสร้างวัตถุประวัติโดยใช้เมธอด createHistory() จากแพ็คเกจประวัติ ซึ่งจะทำให้คุณเข้าถึงเมธอดต่างๆ เช่น push() แทนที่() และ go() วิธีการเหล่านี้ทำให้คุณสามารถปรับเปลี่ยน URL ของเบราว์เซอร์และนำทางระหว่างเส้นทางต่างๆ ในแอปพลิเคชันของคุณได้ คุณยังสามารถใช้เมธอด Listen() เพื่อฟังการเปลี่ยนแปลงใน URL และอัปเดตแอปพลิเคชันของคุณตามนั้น

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

การใช้ประวัติด้วย React Router ช่วยให้นักพัฒนาสร้างส่วนประกอบการนำทางที่ทรงพลังได้ง่ายขึ้นซึ่งผู้ใช้เข้าใจและโต้ตอบได้ง่าย