React-Router: วัตถุประสงค์ของ IndexRoute คืออะไร?

102

ฉันไม่เข้าใจว่าจุดประสงค์ของการใช้นั้นIndexRouteและIndexLink ดูเหมือนว่าในกรณีใด ๆ รหัสด้านล่างจะเลือกส่วนประกอบ Home ก่อนเว้นแต่จะเปิดใช้งานเส้นทาง About

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

เทียบกับ

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

ข้อดี / จุดประสงค์ของกรณีแรกคืออะไร?

— Nick Pineda
แหล่งที่มา

เหตุใดจึงHomeถูกเลือกในตัวอย่างแรกเว้นแต่เส้นทางคือ/home? ดูคำอธิบายในเอกสาร: github.com/rackt/react-router/blob/master/docs/guides/basics/…

— Michelle Tilley

คุณสามารถจินตนาการได้ว่าหน้าหลักคือแถบนำทางและหน้าแรกและเกี่ยวกับเป็นหน้าหลักที่คุณสามารถคลิกผ่านบนแถบนำทางได้

— Nick Pineda

ในตัวอย่างด้านบนการ/จะแสดงผลAppโดยHomeผ่านการเป็นเด็ก ในตัวอย่างด้านล่างการ/จะแสดงผลAppโดยไม่มี HomeหรือAboutแสดงผลเนื่องจากเส้นทางทั้งสองไม่ตรงกัน

— Michelle Tilley

โอ้โห !!! ช่วยเอาคำตอบนั้นมาเป็นคำตอบให้หน่อยได้ไหม ขอบคุณ!

— Nick Pineda

ในการเปลี่ยนจาก v0.13 เป็น v1.0 พวกเขาเปลี่ยนชื่อจากDefaultRouteเป็นIndexRoute. ฉันพบว่า 'ค่าเริ่มต้น' อธิบายวัตถุประสงค์ได้ดีกว่า github.com/rackt/react-router/blob/master/…

— Clarkie

101

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

— Michelle Tilley
แหล่งที่มา

แล้วเราจะใช้คุณสมบัตินี้ในทางปฏิบัติได้อย่างไร?

— seasonqwe

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

— Olga Gnatenko

@ AlexHopeO'Connor ขอบคุณฉันได้อัปเดตคำตอบครึ่งหลัง

— Michelle Tilley

สิ่งที่ผ่านมาตอนเด็กหมายถึงอะไรกันแน่? กำลังโหลดบนพื้นหลัง? สามารถเข้าถึงอุปกรณ์ประกอบฉากได้หรือไม่ อื่น ๆ ?

— StLia