แก้ไขแล้ว: เปลี่ยนเส้นทางด้วย react router v6

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

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

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

2. บรรทัดนี้แสดงองค์ประกอบการเปลี่ยนเส้นทาง ซึ่งจะเปลี่ยนเส้นทางผู้ใช้ไปยังเส้นทาง “/home”

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

v6

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

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

ฉันจะเปลี่ยนเส้นทางใน react router v6 ได้อย่างไรหลังจากเข้าสู่ระบบ

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

ในการทำเช่นนี้ คุณจะต้องสร้างเส้นทางที่จะตรวจสอบว่าผู้ใช้เข้าสู่ระบบหรือไม่ จากนั้นจึงเปลี่ยนเส้นทางตามนั้น ตัวอย่างเช่น:

{
ถ้า (อยู่ในระบบ) {
กลับ ;
} else {
กลับ ;
}
}} />

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

ฉันจะเปลี่ยนเส้นทางโดยอัตโนมัติในการตอบสนองได้อย่างไร

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

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

{เข้าสู่ระบบแล้ว ? : }

ในตัวอย่างนี้ เรากำลังใช้ตัวแปรบูลีน isLoggedIn (ซึ่งจำเป็นต้องตั้งค่าที่อื่น) เป็นเงื่อนไขของเราเมื่อเราควรทำการเปลี่ยนเส้นทาง หากเป็นจริง เราจะแสดงองค์ประกอบหน้าแรกของเรา มิฉะนั้นเราจะเปลี่ยนเส้นทาง

คุณจะเปลี่ยนเส้นทางหลังจาก 5 วินาทีในการตอบสนองได้อย่างไร

หากต้องการเปลี่ยนเส้นทางหลังจาก 5 วินาทีใน React Router คุณสามารถใช้ฟังก์ชัน setTimeout() เพื่อเรียกเมธอด history.push() ด้วยเส้นทางที่ต้องการเป็นอาร์กิวเมนต์

ตัวอย่าง:
นำเข้า { useHistory } จาก “react-router-dom”;
ประวัติ const = useHistory ();
setTimeout(() => {
history.push(“/redirectedPage”);
}, 5000);