ตอบสนอง: ความแตกต่างระหว่าง <เส้นทางที่แน่นอน = = / / /> เส้นทางที่เส้นทาง = "/" />

บางคนสามารถอธิบายความแตกต่างระหว่าง

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

และ

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

ฉันไม่รู้ความหมายของ 'แน่นอน'

ในตัวอย่างนี้ไม่มีอะไรจริงๆ exactพระรามมาลงเล่นเมื่อคุณมีหลายเส้นทางที่มีชื่อคล้ายกัน:

ตัวอย่างเช่นสมมติว่าเรามีUsersส่วนประกอบที่แสดงรายการผู้ใช้ เรายังมีCreateUserส่วนประกอบที่ใช้ในการสร้างผู้ใช้ URL ของสำหรับควรจะซ้อนกันภายใต้CreateUsers Usersดังนั้นการตั้งค่าของเราอาจมีลักษณะดังนี้:

<Switch>
  <Route path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

ตอนนี้ปัญหาที่นี่เมื่อเราไปhttp://app.com/usersที่เราเตอร์จะผ่านเส้นทางที่กำหนดทั้งหมดของเราและส่งคืนการแข่งขันครั้งแรกที่พบ ดังนั้นในกรณีนี้มันจะหาUsersเส้นทางก่อนแล้วจึงส่งคืน ทั้งหมดดี.

แต่ถ้าเราไปถึงhttp://app.com/users/createมันจะผ่านเส้นทางที่เรากำหนดไว้ทั้งหมดอีกครั้งและกลับมาพบกับการแข่งขันครั้งแรก React เร้าเตอร์ทำการจับคู่/usersบางส่วน/users/createดังนั้นจะจับคู่บางส่วนดังนั้นมันจะส่งคืนUsersเส้นทางไม่ถูกต้องอีกครั้ง

exactพระรามปิดการใช้งานการจับคู่บางส่วนสำหรับเส้นทางและทำให้แน่ใจว่ามันส่งกลับเฉพาะเส้นทางถ้าเส้นทางตรงไปยัง URL ปัจจุบัน

ดังนั้นในกรณีนี้เราควรเพิ่มเส้นทางexactของเราUsersเพื่อให้ตรงกับ/users:

<Switch>
  <Route exact path="/users" component={Users} />
  <Route path="/users/create" component={CreateUser} />
</Switch>

เอกสารอธิบายexactรายละเอียดและยกตัวอย่างอื่น ๆ

กล่าวโดยย่อหากคุณมีหลายเส้นทางที่กำหนดไว้สำหรับการกำหนดเส้นทางแอปของคุณล้อมรอบด้วยSwitchองค์ประกอบเช่นนี้

<Switch>

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

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

จากนั้นคุณจะต้องใส่exactคำสำคัญในเส้นทางที่เส้นทางนั้นรวมอยู่ด้วยเส้นทางของเส้นทางอื่น ยกตัวอย่างเช่นเส้นทางบ้าน/จะรวมอยู่ในทุกเส้นทางจึงต้องมีexactคำหลักที่แตกต่างจากเส้นทางอื่น ๆ /ที่เริ่มต้นด้วย เหตุผลก็คล้ายกับ/functionsเส้นทาง หากคุณต้องการที่จะใช้เส้นทางเส้นทางอื่นเช่น/functions-detailหรือ/functions/open-doorซึ่งรวม/functionsอยู่ในนั้นแล้วคุณจะต้องใช้exactสำหรับ/functionsเส้นทาง

ดูที่นี่: https://reacttraining.com/react-router/core/api/Route/exact-bool

ถูกต้อง: บูล

เมื่อเป็นจริงจะจับคู่ก็ต่อเมื่อเส้นทางนั้นlocation.pathnameตรงทั้งหมด

**path**    **location.pathname**   **exact**   **matches?**

/one        /one/two                true        no
/one        /one/two                false       yes

คำตอบที่สั้นที่สุดคือ

โปรดลองสิ่งนี้

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>