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

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

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

<Router>
  <Route path="/">
    <IndexRedirect to="/home" />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
  </Route>  
</Router>

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

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

3 "” – เส้นนี้กำหนดเส้นทางด้วยเส้นทาง '/' คำขอใด ๆ ที่ส่งไปยังเส้นทางนี้จะถูกจัดการโดยเส้นทางนี้

4 "” – บรรทัดนี้เปลี่ยนเส้นทางคำขอใดๆ ไปยังเส้นทาง '/' ไปที่ '/home'

5 "” – เส้นนี้สร้างเส้นทางด้วยเส้นทาง '/home' คำขอใด ๆ ที่ไปยังเส้นทางนี้จะได้รับการจัดการโดยคอมโพเนนต์ Home ซึ่งส่งผ่านเป็นอาร์กิวเมนต์ไปยังคอมโพเนนต์ Route

6 "” – เส้นนี้กำหนดเส้นทางด้วยเส้นทาง '/เกี่ยวกับ' คำขอใดๆ ที่ส่งไปยังเส้นทางนี้จะได้รับการจัดการโดยส่วนประกอบ About ซึ่งส่งผ่านเป็นอาร์กิวเมนต์ไปยังส่วนประกอบ Route

7.”” & “” – เส้นเหล่านี้ปิดทั้งเส้นทางและส่วนประกอบเราเตอร์ตามลำดับ

IndexRedirect คืออะไร

IndexRedirect เป็นส่วนประกอบใน React Router ที่ให้คุณเปลี่ยนเส้นทางจากเส้นทางหนึ่งไปยังอีกเส้นทางหนึ่ง ใช้เมื่อคุณต้องการเปลี่ยนเส้นทางผู้ใช้จาก URL รูทของแอปพลิเคชันไปยังเส้นทางอื่น ตัวอย่างเช่น หากคุณมีแอปพลิเคชันที่มี URL รูทเป็น “/” คุณสามารถใช้ IndexRedirect เพื่อเปลี่ยนเส้นทางผู้ใช้ไปที่ “/home” เมื่อพวกเขาไปที่ URL รูท

วิธีทำ IndexRedirect

IndexRedirect ใน React Router เป็นวิธีเปลี่ยนเส้นทางผู้ใช้จาก URL รูทของแอปพลิเคชันของคุณไปยัง URL อื่น สิ่งนี้มีประโยชน์ในการนำผู้ใช้ไปยังหน้าที่สำคัญที่สุดของแอปพลิเคชันของคุณ หรือสำหรับการสร้างหน้า Landing Page

ในการทำ IndexRedirect ใน React Router คุณต้องใช้ไฟล์ ส่วนประกอบ. ส่วนประกอบนี้ใช้อุปกรณ์ประกอบฉาก XNUMX ชิ้น ได้แก่ "to" และ "push" ส่วน "to" ใช้เพื่อระบุ URL ที่คุณต้องการให้ผู้ใช้เปลี่ยนเส้นทางไป ในขณะที่ส่วน "push" จะกำหนดว่าควรอัปเดตประวัติเบราว์เซอร์เมื่อเปลี่ยนเส้นทางนี้หรือไม่ (จริงตามค่าเริ่มต้น)

ตัวอย่างเช่น หากคุณต้องการให้ผู้ใช้ที่เข้าชม URL รูทของคุณ (เช่น www.example.com) ถูกเปลี่ยนเส้นทางไปที่ www.example.com/home คุณสามารถใช้ IndexRedirect ดังนี้:

… เส้นทางอื่นๆ …