ปัญหาหลักที่เกี่ยวข้องกับการใช้ 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 ซึ่งทำให้ผู้ใช้สามารถแชร์ลิงก์ที่นำพวกเขาไปยังหน้าใดหน้าหนึ่งในแอปพลิเคชันโดยตรงได้ง่ายขึ้น