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

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

 add react-router-dom

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

<Router> 
    <div> 
        <ul> 
            <li><Link to="/">Home</Link></li> 
            <li><Link to="/about">About</Link></li> 
            <li><Link to="/topics">Topics</Link></li> 
        </ul>

        <hr />

        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/topics" component={Topics} />  

    </div>  
</Router>

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

2. บรรทัดนี้ครอบคลุมแอปพลิเคชันทั้งหมดในส่วนประกอบเราเตอร์เพื่อให้ฟังก์ชันการกำหนดเส้นทาง:

3. องค์ประกอบ div นี้มีรายการลิงก์ที่จะใช้นำทางระหว่างเส้นทางต่างๆ:

React Router คืออะไร

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

เส้นด้ายคืออะไร

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