แก้ไขแล้ว: ใช้แอป History React Router v6

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

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// โค้ดนี้นำเข้าส่วนประกอบ BrowserRouter, Switch, Route และ useHistory จากไลบรารี react-router-dom
// จากนั้นสร้างฟังก์ชันชื่อ App ซึ่งใช้ useHistory hook เพื่อสร้างอ็อบเจกต์ประวัติ
// วัตถุประวัตินี้ใช้ในฟังก์ชันที่เรียกว่า handleClick ซึ่งจะพุชรายการใหม่ไปยังกองประวัติเมื่อมีการเรียกใช้
// ฟังก์ชัน App จะคืนค่า JSX บางส่วนซึ่งรวมถึงปุ่มที่มีตัวจัดการ onClick ที่เรียก handleClick เมื่อคลิก
// สุดท้าย มีคอมโพเนนต์ Switch ที่มีคอมโพเนนต์ Route หนึ่งคอมโพเนนต์ภายใน ซึ่งแสดงผลคอมโพเนนต์ NewLocation เมื่อพาธตรงกับ “/new-location”

อะไรคือ useHistory

useHistory เป็น React Hook ที่จัดทำโดย React Router ที่อนุญาตให้ส่วนประกอบเข้าถึงวัตถุประวัติเพื่อนำทางโดยทางโปรแกรม สามารถใช้เพื่อพุชตำแหน่งใหม่ไปยังกลุ่มประวัติ แทนที่ตำแหน่งปัจจุบัน ย้อนกลับไปมาในประวัติ ฯลฯ

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

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

นำเข้า { useHistory } จาก 'react-router-dom';

const MyComponent = () => {
ประวัติ const = useHistory ();

// ตอนนี้คุณสามารถเข้าถึงประวัติเส้นทางผ่านวัตถุ `ประวัติ`

กลับ (…);
}

ไม่ตอบสนองต่อ API ประวัติการใช้เราเตอร์

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

กระทู้ที่เกี่ยวข้อง:

แสดงความคิดเห็น