แก้ไขแล้ว: ดาวน์โหลด react router dom

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

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

ReactDOM.render(
  <Router>
    <Route path="/">
      <App />
    </Route>
  </Router>, 
  document.getElementById('root'));

1. “นำเข้า { BrowserRouter เป็นเราเตอร์, เส้นทาง } จาก 'react-router-dom'” – บรรทัดนี้นำเข้าส่วนประกอบ BrowserRouter และ Route จากไลบรารี react-router-dom

2. “ReactDOM.render(” – บรรทัดนี้เรียกวิธีการเรนเดอร์ ReactDOM เพื่อเรนเดอร์องค์ประกอบ React ใน DOM ในคอนเทนเนอร์ที่ให้มาและส่งคืนการอ้างอิงไปยังส่วนประกอบ (หรือส่งคืนค่า null สำหรับส่วนประกอบที่ไม่มีสถานะ)

3 "” – นี่คือแท็กเปิดสำหรับส่วนประกอบเราเตอร์ซึ่งจะใช้เพื่อรวมเส้นทางทั้งหมดของเราเพื่อให้ฟังก์ชันการกำหนดเส้นทางสำหรับแอปพลิเคชันของเรา

4 "” – นี่คือแท็กเปิดสำหรับองค์ประกอบเส้นทางซึ่งจะใช้เพื่อกำหนดเส้นทางเดียวภายในแอปพลิเคชันของเราซึ่งจะตรงกับคำขอใด ๆ ที่ทำขึ้นที่ '/'

5 "” – นี่คือแท็กปิดตัวเองที่แสดงส่วนประกอบของแอปในแผนผัง DOM ของเราเมื่อเส้นทางนี้จับคู่โดยเราเตอร์ตอบสนอง
คอมโพเนนต์ของแอปสามารถเป็นคอมโพเนนต์ React ใดๆ ที่เรากำหนดไว้ที่อื่นในโค้ดเบสของเรา หรืออิมพอร์ตจากไลบรารีหรือแพ็กเกจอื่น เช่น Material UI หรือ Bootstrap เป็นต้น...

6. “” – นี่คือแท็กปิดสำหรับส่วนประกอบเส้นทางที่เปิดในบรรทัดที่ 4 ด้านบน ซึ่งปิดคำจำกัดความของเส้นทางนี้โดยเฉพาะเพื่อให้สามารถเพิ่มเส้นทางอื่นได้หากจำเป็นในภายหลังในโค้ดเบสของเราโดยไม่กระทบต่อการทำงานหรือพฤติกรรมของเส้นทางนี้ .

7. “” – นี่คือแท็กปิดสำหรับส่วนประกอบเราเตอร์ที่เปิดในบรรทัดที่ 3 ด้านบน ซึ่งปิดคำจำกัดความของเราเตอร์นี้โดยเฉพาะ เพื่อให้เราเตอร์อื่นสามารถเพิ่มได้หากจำเป็นในภายหลังในโค้ดเบสของเราโดยไม่กระทบต่อฟังก์ชันหรือพฤติกรรมของเราเตอร์นี้ ..

8.”document.getElementById('รูท'));” – สุดท้าย เราส่งเอกสาร getElementById('root') เป็นอาร์กิวเมนต์ให้กับวิธีการเรนเดอร์ ReactDOM ซึ่งจะบอกตำแหน่งที่เราต้องการเมานต์/เรนเดอร์แอปภายในทรี DOM (ในกรณีนี้ภายในองค์ประกอบที่มี id=” ราก").

แพ็คเกจ react-router-dom

React Router เป็นไลบรารีการกำหนดเส้นทางยอดนิยมสำหรับ React มี API ที่ทรงพลังและใช้งานง่ายสำหรับจัดการเส้นทางและการนำทางของแอปพลิเคชัน แพ็คเกจ react-router-dom เป็นเวอร์ชันอย่างเป็นทางการของ React Router สำหรับเว็บแอปพลิเคชัน มีส่วนประกอบเช่น และ เพื่อช่วยจัดการการกำหนดเส้นทางในแอปของคุณ นอกจากนี้ยังมี hook เช่น useHistory, useLocation และ useParams เพื่อเข้าถึงข้อมูลเส้นทางปัจจุบันจากภายในส่วนประกอบของคุณ ด้วย react-router-dom คุณสามารถสร้างเส้นทางไดนามิกตามพารามิเตอร์ URL สตริงการสืบค้น หรือแม้แต่ตรรกะที่กำหนดเองได้อย่างง่ายดาย คุณยังสามารถสร้างเส้นทางที่ซ้อนกันด้วยส่วนไดนามิกเพื่อให้การควบคุมโครงสร้างการนำทางของแอปพลิเคชันของคุณละเอียดยิ่งขึ้น

วิธีดาวน์โหลด react router dom ตัวอย่างโค้ด

1. ติดตั้ง React Router Dom:
ในไดเร็กทอรีโปรเจ็กต์ของคุณ ให้รันคำสั่งต่อไปนี้เพื่อติดตั้ง React Router Dom:
`npm ติดตั้ง react-router-dom'

2. นำเข้า React Router Dom:
เมื่อคุณติดตั้ง React Router Dom แล้ว คุณสามารถนำเข้าในโครงการของคุณโดยใช้รหัสต่อไปนี้:
`นำเข้า { BrowserRouter เป็นเราเตอร์, เส้นทาง } จาก 'react-router-dom''

3. สร้างส่วนประกอบเส้นทาง:
จากนั้น สร้างองค์ประกอบเส้นทางที่จะแสดงผลหน้าเมื่อผู้ใช้ไปที่เส้นทางที่ระบุ ตัวอย่างเช่น ถ้าคุณต้องการแสดงเพจเมื่อมีคนมาเยี่ยมชม /home ในแอปพลิเคชันของคุณ คุณสามารถใช้รหัสต่อไปนี้:
``

4. รวมแอปของคุณด้วยส่วนประกอบเราเตอร์:
สุดท้าย หุ้มแอปของคุณด้วยคอมโพเนนต์เราเตอร์ เพื่อให้เส้นทางทั้งหมดของคุณแสดงอย่างถูกต้อง คุณสามารถทำได้โดยใช้โค้ดต่อไปนี้ในไฟล์รูทของคุณ (โดยปกติคือ index.js): ` `.