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

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

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function AppRouter() { 

    return ( 

        <Router> 

            <Suspense fallback={<div>Loading...</div>}>

                <Switch> 

                    <Route exact path="/" component={Home} /> 

                    <Route path="/about" component={About} /> 

                    <Route path="/contact" component={Contact} />  

                </Switch>  

            </Suspense>  

        </Router>  

    );  
    
}  
export default AppRouter;

1. รหัสนี้นำเข้าไลบรารี React รวมถึงคอมโพเนนต์ Suspense จาก React และคอมโพเนนต์ BrowserRouter, Route และ Switch จาก react-router-dom
2. จากนั้นจะกำหนดองค์ประกอบสามส่วน (หน้าแรก, เกี่ยวกับ, ผู้ติดต่อ) โดยใช้คุณสมบัติการโหลดแบบขี้เกียจของ React เพื่อนำเข้าจากไฟล์ที่เกี่ยวข้อง
3. มีการกำหนดฟังก์ชัน AppRouter ซึ่งจะส่งคืนส่วนประกอบ Router ที่มีส่วนประกอบ Suspense ที่มีส่วนประกอบ Switch อยู่ภายใน
4. ภายในคอมโพเนนต์สวิตช์คือคอมโพเนนต์เส้นทางสามรายการ ซึ่งแต่ละคอมโพเนนต์จะแสดงผลหนึ่งในคอมโพเนนต์ที่นำเข้าเมื่อเส้นทางที่เกี่ยวข้องตรงกันใน URL (เช่น '/' สำหรับหน้าแรก)
5. ในที่สุด AppRouter จะถูกส่งออกเพื่อให้สามารถนำไปใช้ที่อื่นในแอปพลิเคชันได้

คุณใช้การโหลดแบบขี้เกียจใน react router v6 อย่างไร

v6

การโหลดแบบขี้เกียจเป็นเทคนิคที่ใช้เพื่อชะลอการโหลดส่วนประกอบบางอย่างจนกว่าจะจำเป็น ใน React Router v6 การโหลดแบบ Lazy Loading สามารถทำได้โดยใช้ไดนามิก import() ไวยากรณ์ ไวยากรณ์นี้ทำให้คุณสามารถแบ่งโค้ดออกเป็นหลายบันเดิล ซึ่งสามารถโหลดได้ตามต้องการหรือพร้อมกัน ซึ่งช่วยลดขนาดบันเดิลเริ่มต้นและปรับปรุงประสิทธิภาพ หากต้องการใช้การโหลดแบบ Lazy Loading กับ React Router v6 คุณต้องรวมส่วนประกอบที่คุณต้องการโหลดแบบ Lazy Loading ในการเรียก Dynamic Import() การเรียก import() จะส่งคืนสัญญาซึ่งจะแก้ไขเมื่อคอมโพเนนต์ถูกโหลดและพร้อมที่จะแสดงผล

ใจจดใจจ่อและขี้เกียจในปฏิกิริยาคืออะไร

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

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