แก้ไขแล้ว: ไม่พบหน้ารีโหลดเราเตอร์ตอบสนอง

ปัญหาหลักที่เกี่ยวข้องกับ React Router reload page not found คือเมื่อผู้ใช้รีเฟรชหน้า เบราว์เซอร์จะพยายามส่งคำขอไปยังเซิร์ฟเวอร์สำหรับ URL ปัจจุบัน อย่างไรก็ตาม เนื่องจาก React Router เป็นการกำหนดเส้นทางฝั่งไคลเอนต์ จึงไม่มีเส้นทางเซิร์ฟเวอร์ที่สอดคล้องกันสำหรับ URL ดังกล่าว และด้วยเหตุนี้จึงส่งคืนข้อผิดพลาด 404 Not Found สิ่งนี้อาจเป็นปัญหาอย่างยิ่งหากผู้ใช้คาดหวังว่าเนื้อหาบางอย่างจะปรากฏเมื่อรีเฟรช

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

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// บรรทัดที่ 1: บรรทัดนี้นำเข้าส่วนประกอบ BrowserRouter, Route และ Switch จากไลบรารี react-router-dom

// บรรทัดที่ 3: บรรทัดนี้กำหนดฟังก์ชันที่เรียกว่า App ซึ่งส่งคืนโค้ด JSX

// บรรทัดที่ 5: บรรทัดนี้รวมรหัส JSX ทั้งหมดในส่วนประกอบเราเตอร์จาก react-router-dom

// บรรทัดที่ 6: บรรทัดนี้ล้อมรอบเส้นทางทั้งหมดในส่วนประกอบ Switch จาก react-router-dom

// บรรทัดที่ 7 – 9: บรรทัดเหล่านี้กำหนดสองเส้นทางสำหรับ '/' และ '/about' ตามลำดับด้วยส่วนประกอบตามลำดับ (Home และ About)

// บรรทัดที่ 11 – 12: บรรทัดเหล่านี้กำหนดเส้นทางเมื่อไม่มีเส้นทางอื่นตรงกัน ซึ่งแสดงแท็ก h1 ว่า “ไม่พบหน้า”

ไม่พบหน้าข้อผิดพลาด

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

ฉันจะจัดการกับ Page not found ใน react router ได้อย่างไร

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

ตัวอย่างเช่น:

} />

สิ่งนี้จะจับคู่ URL ใด ๆ ที่ยังไม่ถูกจับคู่โดยเส้นทางที่มีอยู่ และแสดงส่วนประกอบ NotFound ของคุณ

ฉันจะบังคับให้หน้าแสดงปฏิกิริยาโหลดซ้ำได้อย่างไร

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

const AppRouter = () => (

{/* เส้นทางของคุณที่นี่ */}

);

เมื่อคุณเข้าถึงออบเจกต์ประวัติแล้ว คุณสามารถใช้เมธอดแทนที่ได้ดังนี้:

history.replace('/บางเส้นทาง');