ฉันต้องการประกาศพา ธ ด้วยพารามิเตอร์พา ธ เผื่อเลือกดังนั้นเมื่อฉันเพิ่มเพจเพื่อทำสิ่งพิเศษ (เช่นกรอกข้อมูลบางส่วน):

http: // localhost / app / path / to / page <= แสดงหน้า http: // localhost / app / เส้นทาง / ไปยัง / หน้า / pathParam <= แสดงหน้าด้วยข้อมูลบางส่วนตาม pathParam

ในเราเตอร์ที่ตอบสนองของฉันฉันมีเส้นทางต่อไปนี้เพื่อสนับสนุนสองตัวเลือก (นี่คือตัวอย่างที่ง่าย):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

คำถามของฉันคือเราจะประกาศในเส้นทางเดียวได้ไหม? หากฉันเพิ่มเฉพาะแถวที่สองดังนั้นไม่พบเส้นทางที่ไม่มีพารามิเตอร์

แก้ไข # 1:

วิธีการแก้ปัญหาที่กล่าวถึงที่นี่เกี่ยวกับไวยากรณ์ต่อไปนี้ไม่ทำงานสำหรับฉันมันเป็นหนึ่งที่เหมาะสม มันมีอยู่ในเอกสารประกอบหรือไม่?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

รุ่นปฏิกิริยาของเราเตอร์ของฉันคือ: 1.0.3

การแก้ไขที่คุณโพสต์นั้นถูกต้องสำหรับ React-router รุ่นเก่า (v0.13) และไม่ทำงานอีกต่อไป

ตอบสนอง Router v1, v2 และ v3

ตั้งแต่เวอร์ชัน1.0.0คุณกำหนดพารามิเตอร์ทางเลือกด้วย:

<Route path="to/page(/:pathParam)" component={MyPage} />

และสำหรับพารามิเตอร์ทางเลือกหลายตัว :

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

คุณใช้วงเล็บ( )เพื่อตัดส่วนเสริมของเส้นทางรวมถึงเครื่องหมายทับ ( /) ตรวจสอบหน้าคู่มือการจับคู่เส้นทางของเอกสารอย่างเป็นทางการ

หมายเหตุ: พารามิเตอร์ตรงส่วน URL ที่ขึ้นไปต่อไป, หรือ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเส้นทางและ params เฉพาะอ่านเพิ่มเติมที่นี่:paramName/?#

ทำปฏิกิริยาเราเตอร์ v4 ขึ้นไป

ตอบสนอง Router v4 เป็นพื้นฐานที่แตกต่างกันกว่า v1-v3 และพารามิเตอร์ตัวเลือกเส้นทางที่ไม่ได้กำหนดไว้อย่างชัดเจนในเอกสารที่เป็นทางการอย่างใดอย่างหนึ่ง

แต่คุณจะได้รับคำแนะนำให้กำหนดpathพารามิเตอร์ที่path-to-regexpเข้าใจ สิ่งนี้ช่วยให้มีความยืดหยุ่นมากขึ้นในการกำหนดพา ธ ของคุณเช่นรูปแบบการทำซ้ำไวลด์การ์ด ฯลฯ ดังนั้นเพื่อกำหนดพารามิเตอร์เป็นทางเลือกคุณเพิ่มเครื่องหมายคำถามต่อท้าย ( ?)

ดังนั้นในการกำหนดพารามิเตอร์ทางเลือกคุณต้อง:

<Route path="/to/page/:pathParam?" component={MyPage} />

และสำหรับพารามิเตอร์ทางเลือกหลายตัว :

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

หมายเหตุ: การ ตอบสนอง Router v4 เป็นเข้ากันไม่ได้กับตอบสนองเตอร์-รีเลย์( อ่านเพิ่มเติมได้ที่นี่ ) ใช้เวอร์ชัน v3 หรือเก่ากว่า (แนะนำ v2) แทน

สำหรับผู้ใช้ React Router v4 ที่มาถึงที่นี่หลังจากการค้นหาพารามิเตอร์ทางเลือกใน a <Route>จะแสดงด้วย?คำต่อท้าย

นี่คือเอกสารที่เกี่ยวข้อง:

https://reacttraining.com/react-router/web/api/Route/path-string

เส้นทาง: สตริง

เส้นทาง URL ที่ถูกต้องว่าเส้นทางการ regexpเข้าใจ

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

ไม่จำเป็น

พารามิเตอร์สามารถต่อท้ายด้วยเครื่องหมายคำถาม (?) เพื่อให้พารามิเตอร์เป็นตัวเลือก สิ่งนี้จะทำให้คำนำหน้าเป็นตัวเลือก

ตัวอย่างง่าย ๆ ของส่วนการแบ่งหน้าของไซต์ที่สามารถเข้าถึงโดยมีหรือไม่มีหมายเลขหน้า

<Route path="/section/:page?" component={Section} />

ไวยากรณ์การทำงานสำหรับ params เผื่อเลือกหลายรายการ:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

ตอนนี้ url สามารถเป็น:

1. /มาตรา
2. / ส่วน / หน้า / 1
3. / ส่วน / หน้า / 1 / เรียง / ASC

สำหรับ react-router V5 ขึ้นไปใช้ไวยากรณ์ด้านล่างสำหรับหลาย ๆ พา ธ

<Route
          exact
          path={[path1, path2]}
          component={component}
        />