ปัญหาหลักที่เกี่ยวข้องกับการเปลี่ยนเส้นทาง React Router 404 คือการดำเนินการได้ยาก เนื่องจาก React Router ไม่มีหน้า 404 ในตัว นักพัฒนาจึงต้องสร้างเส้นทางสำหรับหน้า 404 ด้วยตนเอง จากนั้นกำหนดค่าเราเตอร์ให้เปลี่ยนเส้นทางคำขอใดๆ ที่ไม่ตรงกับเส้นทางที่มีอยู่ การดำเนินการนี้ต้องการโค้ดและการกำหนดค่าเพิ่มเติม ซึ่งอาจใช้เวลานานและแก้ไขจุดบกพร่องได้ยากหากมีสิ่งผิดปกติเกิดขึ้น นอกจากนี้ หากผู้ใช้ไปที่ URL ที่ไม่มีอยู่โดยตรง พวกเขาจะยังคงเห็นหน้าแสดงข้อผิดพลาดแทนที่จะถูกเปลี่ยนเส้นทางไปยังหน้า 404
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</Switch>
</Router>
);
// บรรทัดที่ 1: บรรทัดนี้นำเข้าส่วนประกอบ BrowserRouter, Route และ Switch จากไลบรารี react-router-dom
// บรรทัดที่ 3: บรรทัดนี้กำหนดฟังก์ชันที่เรียกว่า App ที่คืนค่า JSX
// บรรทัดที่ 5-7: บรรทัดเหล่านี้ล้อมคอมโพเนนต์ของแอปในคอมโพเนนต์ของเราเตอร์จาก react-router-dom
// บรรทัดที่ 8-10: บรรทัดเหล่านี้กำหนดสองเส้นทางสำหรับส่วนประกอบ Home และ About ตามลำดับ
// บรรทัดที่ 12: บรรทัดนี้กำหนดเส้นทางที่เปลี่ยนเส้นทางไปยังหน้าแรกหากไม่มีเส้นทางอื่นที่ตรงกัน
รหัสข้อผิดพลาด 404 คืออะไร
รหัสข้อผิดพลาด 404 ใน React Router เป็นรหัสสถานะ HTTP ที่ระบุว่าไม่พบทรัพยากรที่ร้องขอ โดยปกติจะถูกส่งกลับเมื่อผู้ใช้พยายามเข้าถึงหน้าหรือเส้นทางที่ไม่มีอยู่ กรณีนี้อาจเกิดขึ้นได้หากผู้ใช้พิมพ์ URL ผิด หรือหน้าถูกลบหรือย้ายโดยไม่ได้อัปเดตลิงก์ไปยังหน้านั้น เมื่อสิ่งนี้เกิดขึ้น React Router จะแสดงหน้า 404 ทั่วไปพร้อมข้อความที่เหมาะสมเพื่อแจ้งให้ผู้ใช้ทราบถึงข้อผิดพลาด
404 เปลี่ยนเส้นทาง
ใน React Router การเปลี่ยนเส้นทาง 404 เป็นวิธีเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอื่นเมื่อพวกเขาพยายามเข้าถึง URL ที่ไม่ถูกต้อง สิ่งนี้มีประโยชน์ในการมอบประสบการณ์ที่ดีขึ้นแก่ผู้ใช้เมื่อพวกเขาป้อน URL ที่ไม่ถูกต้องหรือพยายามเข้าถึงหน้าเว็บที่ไม่มีอยู่จริง การเปลี่ยนเส้นทาง 404 สามารถนำไปใช้ได้โดยใช้องค์ประกอบการเปลี่ยนเส้นทางจาก React Router ซึ่งช่วยให้คุณระบุชื่อพาธของเพจที่คุณต้องการเปลี่ยนเส้นทางผู้ใช้ไป ตัวอย่างเช่น ถ้ามีคนพยายามเข้าถึง /invalid-url คุณสามารถใช้คอมโพเนนต์การเปลี่ยนเส้นทางดังนี้:
