ความแตกต่างระหว่างการกำหนดเส้นทางส่วนหน้าและการกำหนดเส้นทางส่วนหลัง: 1. การกำหนดเส้นทางส่วนหน้าจะถูกทริกเกอร์ผ่านแท็กลิงก์ใน "react-router" และการกำหนดเส้นทางส่วนหลังจะถูกทริกเกอร์ผ่าน ajax 2. การกำหนดเส้นทางส่วนหน้าคือ ขึ้นอยู่กับการตรวจสอบเหตุการณ์ของเบราว์เซอร์ ในขณะที่การกำหนดเส้นทางส่วนหลังจะขึ้นอยู่กับโปรโตคอลการสื่อสาร http 3. การกำหนดเส้นทางส่วนหน้าสามารถบรรลุการเรนเดอร์บางส่วนได้ ในขณะที่การกำหนดเส้นทางส่วนหลังสามารถแสดงผลทั้งหน้าใหม่ได้
สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3
กลไกการกำหนดเส้นทางแบ็กเอนด์
นักเรียนที่รู้จักแบ็กเอนด์จะรู้ว่าการกำหนดเส้นทางแบ็กเอนด์หมายความว่าแบ็กเอนด์จะลงทะเบียนฟังก์ชันการกำหนดเส้นทางแบ็กเอนด์ใน app.js และส่วนหน้าจะทริกเกอร์ฟังก์ชันเรียกกลับการกำหนดเส้นทางที่สอดคล้องกันผ่าน ajax (ใช้ express เป็นตัวอย่าง)
ทริกเกอร์: อาแจ็กซ์
การตอบสนอง: app.get('/router',callback)
หลักการ: ขึ้นอยู่กับโปรโตคอลการสื่อสาร http
//app.jsapp.get('/', (คำขอ, ตอบกลับ) => { la ret = { "success": true, "code": 200, "message": "", "data": [], } การตอบสนองส่ง (ret)})กลไกการกำหนดเส้นทางส่วนหน้า
สำหรับการกำหนดเส้นทางส่วนหน้า (หมายถึงเราเตอร์แบบโต้ตอบ) ส่วนหน้าจะลงทะเบียนการกำหนดเส้นทางส่วนหน้าและการแมปส่วนประกอบใน router.js และส่วนหน้าทำให้เกิดการเรนเดอร์ส่วนประกอบผ่านเส้นทางที่กำหนดโดยลิงก์หรือโดยการป้อน เส้นทางที่เกี่ยวข้องในเบราว์เซอร์:
ทริกเกอร์: แท็กลิงก์ใน react-router
การตอบสนอง: แสดงผลส่วนประกอบที่เกี่ยวข้องในแท็กเส้นทาง
หลักการ: อิงตามแฮชในเบราว์เซอร์ (ก่อน React-Router v2) ประวัติ (React-Router v4)
//index.jsclass ListContent ขยาย Component { Constructor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> โพสต์หัวข้อ </Link> </Button> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <เส้นทางที่แน่นอน path="/" component={index} /> < เส้นทางที่แน่นอน path="/topic" องค์ประกอบ={topic} /> </Switch> </div></Router>ใน router.js ส่วนประกอบส่วนหัวจะมีอยู่ในหน้าเสมอ ในขณะที่ส่วนประกอบในแท็ก Switch จะแสดงผลหลังจากถูกทริกเกอร์เท่านั้น กล่าวง่ายๆ ก็คือส่วนประกอบที่ไม่ถูกทริกเกอร์นั้นเป็นโมฆะและจะไม่แสดงขึ้นมา
ดังนั้นจึงมีการเรนเดอร์เฉพาะที่
//หากการกำหนดเส้นทางส่วนหน้า '/topic' ถูกทริกเกอร์ ส่วนประกอบดัชนีจะไม่แสดงผล <เราเตอร์> <div> <ส่วนหัว/> <สวิตช์> <เส้นทางที่แน่นอน path="/" องค์ประกอบ={null} /> < เส้นทางที่แน่นอน = " /topic" องค์ประกอบ={topic} /> </Switch> </div></Router>ความแตกต่างระหว่างการกำหนดเส้นทางส่วนหน้าและการกำหนดเส้นทางส่วนหลัง
การกำหนดเส้นทางส่วนหน้าจะขึ้นอยู่กับการตรวจสอบเหตุการณ์ของเบราว์เซอร์ และไม่ผ่านโปรโตคอลการสื่อสาร http
การกำหนดเส้นทางส่วนหน้าจะแสดงผลบางส่วน และส่วนหลังจะแสดงผลทั้งหน้าใหม่ กล่าวโดยเทียบกันคือ ประสบการณ์การกำหนดเส้นทางส่วนหน้าจะดีกว่า