แก้ไขแล้ว: วิธีเปลี่ยนเส้นทางใน React Router v6 ใน React Router

ปัญหาหลักที่เกี่ยวข้องกับการเปลี่ยนเส้นทางใน React Router v6 คือไวยากรณ์สำหรับการเปลี่ยนเส้นทางมีการเปลี่ยนแปลงอย่างมากจากเวอร์ชันก่อนหน้า ใน v6 ต้องใช้คอมโพเนนต์ Redirect แทน องค์ประกอบและ to prop ต้องจัดเตรียมวัตถุที่มีคุณสมบัติชื่อพาธ นอกจากนี้ พร็อพเพิ่มเติมใดๆ เช่น พารามิเตอร์สถานะหรือเคียวรีต้องรวมไว้ในอ็อบเจ็กต์นี้ด้วย สิ่งนี้อาจทำให้นักพัฒนาที่คุ้นเคยกับการใช้ไวยากรณ์ที่เรียบง่ายกว่า React Router เวอร์ชันก่อนหน้าเป็นเรื่องยาก

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

1. นำเข้า { เปลี่ยนเส้นทาง } จาก 'react-router-dom';
– บรรทัดนี้นำเข้าส่วนประกอบ Redirect จากไลบรารี react-router-dom

2.
– บรรทัดนี้สร้างองค์ประกอบเส้นทางด้วยเส้นทางที่แน่นอนของ “/old-path”

3.
– บรรทัดนี้ใช้คอมโพเนนต์การเปลี่ยนเส้นทางเพื่อเปลี่ยนเส้นทางจาก “/old-path” เป็น “/new-path”

ฉันจะเปลี่ยนเส้นทางใน React Router v6 ได้อย่างไร

React Router v6 มีองค์ประกอบการเปลี่ยนเส้นทางที่สามารถใช้เพื่อเปลี่ยนเส้นทางผู้ใช้จากหน้าหนึ่งไปอีกหน้าหนึ่ง หากต้องการใช้คอมโพเนนต์ Redirect คุณต้องนำเข้าจากแพ็คเกจ react-router-dom องค์ประกอบการเปลี่ยนเส้นทางใช้อุปกรณ์ประกอบฉากสองอย่าง: จากและถึง ส่วน "จาก" คือเส้นทางของหน้าปัจจุบัน และส่วน "ถึง" คือเส้นทางของหน้าที่คุณต้องการเปลี่ยนเส้นทางผู้ใช้ไป ตัวอย่างเช่น หากคุณต้องการเปลี่ยนเส้นทางผู้ใช้จาก /homepage ไปยัง /about โค้ดของคุณจะมีลักษณะดังนี้:

นำเข้า { เปลี่ยนเส้นทาง } จาก 'react-router-dom';

เราเตอร์ตอบสนองคืออะไร?

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

ประเภทของเราเตอร์ในการตอบสนอง

React Router เป็นไลบรารีการกำหนดเส้นทางสำหรับ React ที่ช่วยให้นักพัฒนาสร้างแอปพลิเคชันหน้าเดียวพร้อมการนำทางและการกำหนดเส้นทาง URL มีเราเตอร์สามประเภท: BrowserRouter, HashRouter และ MemoryRouter

BrowserRouter: เราเตอร์นี้ใช้ API ประวัติ HTML5 เพื่อให้ UI ของคุณซิงค์กับ URL ใช้เมื่อคุณต้องการใช้ URL จริงในแอปพลิเคชันของคุณ

HashRouter: เราเตอร์นี้ใช้ส่วนแฮชของ URL (เช่น #) เพื่อให้ UI ของคุณซิงค์กับ URL ใช้เมื่อคุณไม่ต้องการใช้ URL จริงหรือเมื่อคุณต้องการความเข้ากันได้กับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับ API ประวัติ HTML5

MemoryRouter: เราเตอร์นี้เก็บประวัติตำแหน่งไว้ในหน่วยความจำ และไม่โต้ตอบกับแถบที่อยู่ของเบราว์เซอร์หรือสร้าง URL จริง มีประโยชน์สำหรับวัตถุประสงค์ในการทดสอบหรือสำหรับสภาพแวดล้อมที่ไม่ต้องการใช้ URL จริง (เช่น การแสดงผลฝั่งเซิร์ฟเวอร์)

ฉันจะเปลี่ยนเส้นทางใน React Router v6 ได้อย่างไร

เราเตอร์ตอบสนองคืออะไร?

ประเภทของเราเตอร์ในการตอบสนอง

แสดงความคิดเห็น ยกเลิกการตอบ