แก้ไขแล้ว: ลิงก์เราเตอร์ตอบสนองใช้งานได้

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

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

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

1. นำเข้า { BrowserRouter as Router, Route, Link } จาก “react-router-dom”;
// บรรทัดนี้นำเข้าคอมโพเนนต์ BrowserRouter, Route และ Link จากไลบรารี react-router-dom

2.
// บรรทัดนี้สร้างส่วนประกอบของเราเตอร์ที่จะใช้สร้างเส้นทางสำหรับแอปพลิเคชันของเรา

3.

// สิ่งนี้จะปิดองค์ประกอบ div ซึ่งมีเส้นทางและลิงก์ทั้งหมดของเรา

ลิงค์ v6

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

ทำไม React Router Link ไม่ทำงาน

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