ชื่อพา ธ หลายชื่อสำหรับส่วนประกอบเดียวกันใน React Router

116

ฉันใช้ส่วนประกอบเดียวกันสำหรับเส้นทางที่แตกต่างกันสามเส้นทาง:

<Router>
    <Route path="/home" component={Home} />
    <Route path="/users" component={Home} />
    <Route path="/widgets" component={Home} />
</Router>

มีการรวมเข้าด้วยกันหรือไม่เพื่อให้เป็นดังนี้:

<Router>
    <Route path=["/home", "/users", "/widgets"] component={Home} />
</Router>

— Chetan Garg
แหล่งที่มา

2

สำหรับ react-router 4.4.0 ตอนนี้คุณสามารถระบุอาร์เรย์ของพา ธ ในลักษณะที่คล้ายกับคำแนะนำของคุณ ดูคำตอบของฉันที่นี่

— Ben Smith

142

สำหรับ react-router v4.4.0-beta.4และอย่างเป็นทางการใน v5.0.0 ตอนนี้คุณสามารถระบุอาร์เรย์ของพา ธ ที่แก้ไขเป็นส่วนประกอบเช่น

<Router>
    <Route path={["/home", "/users", "/widgets"]} component={Home} />
</Router>

แต่ละพา ธ ในอาร์เรย์เป็นสตริงนิพจน์ทั่วไป

เอกสารสำหรับวิธีการนี้สามารถพบได้ที่นี่

— เบ็นสมิ ธ
แหล่งที่มา

5

ฉันเชื่อว่านี่คือคำตอบที่ดีที่สุด คำตอบของ @Cameron ไม่รองรับฟีเจอร์ regexp แบบเต็ม แต่อย่างใด (อย่างน้อยฉันก็ทำไม่ได้)

— Christopher Regner

2

ฉันจะตั้งค่าexactแอตทริบิวต์สำหรับเส้นทางเดียวได้อย่างไร

— JulianSoto

1

@JulianSoto สร้างเส้นทางไปยังส่วนประกอบด้วยเส้นทางเดียวพร้อมกับเส้นทางที่แน่นอน จากนั้นคุณสามารถสร้างเส้นทางอื่นไปยังองค์ประกอบเดียวกันด้วยอาร์เรย์ของเส้นทางที่ไม่มีแอตทริบิวต์ที่แน่นอน

— Ben Smith

ฉันไม่สามารถyarn upgradeจาก 4.3 เป็น 4.4 วางจำหน่ายอย่างเป็นทางการหรือไม่?

— ndtreviv

@ndtreviv ดูบันทึกการเปลี่ยนแปลงของเราเตอร์แบบตอบสนองฉันเห็นว่าคุณลักษณะนี้เปิดตัวใน v4.4.0 Beta 4 ฉันขอแนะนำให้อัปเกรดเป็นเวอร์ชันล่าสุดซึ่งในขณะที่เขียนสิ่งนี้คือ v5.5.0 คุณสามารถทำสิ่งนี้ได้โดยรัน "yarn upgrade react-router --latest"

— Ben Smith

115

อย่างน้อยด้วย react-router v4 pathสามารถเป็นสตริงนิพจน์ทั่วไปได้ดังนั้นคุณสามารถทำสิ่งนี้:

<Router>
    <Route path="/(home|users|widgets)/" component={Home} />
</Router>

อย่างที่คุณเห็นว่ามันดูละเอียดไปหน่อยดังนั้นถ้าคุณcomponent/ routeเรียบง่ายแบบนี้ก็อาจจะไม่คุ้มค่า

และแน่นอนว่าหากสิ่งนี้เกิดขึ้นจริงบ่อยๆคุณสามารถสร้างองค์ประกอบการตัดที่รับpathsพารามิเตอร์อาร์เรย์ได้เสมอซึ่งทำให้ regex หรือ.mapตรรกะสามารถนำกลับมาใช้ใหม่ได้

— คาเมรอน
แหล่งที่มา

5

ความคิดที่ดี @Cameron ฉันพบว่ามีประโยชน์ในการแก้ไขเล็กน้อยเพื่อให้ตรงเฉพาะเส้นทางที่ขึ้นต้นด้วยกลุ่มใดกลุ่มหนึ่ง: /^\/(home|users|widgets)/ ตอนนี้/widgetsจะจับคู่ แต่/dashboard/widgetsจะไม่ตรงกัน

— Towler

4

ควรจะดี แต่สำหรับตอนนี้ regex ไม่ถูกต้องในการตรวจสอบประเภท prop: Warning: Failed prop type: Invalid prop path` ของประเภทที่regexpระบุRouteไว้string`

— Fábio Paiva

@ FábioPaivaใช่ฉันยังไม่ได้คิดวิธีใส่ regex โดยพลการในเส้นทาง

— Atav32

1

ใส่เป็นสตริง<Route path="/(new|edit)/user/:id?" ... />

— medv

2

ไม่ทำงานด้วยpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— Murtaza Hussain

43

ฉันไม่คิดว่าถ้าคุณใช้ React Router เวอร์ชันต่ำกว่า v4

คุณสามารถใช้ a ได้mapตามที่ทำกับคอมโพเนนต์ JSX อื่น ๆ แม้ว่า:

<Router>
    {["/home", "/users", "/widgets"].map((path, index) => 
        <Route path={path} component={Home} key={index} />
    )}
</Router>

แก้ไข

นอกจากนี้คุณยังสามารถใช้ regex สำหรับเส้นทางในการตอบสนองเตอร์ v4ตราบเท่าที่มันได้รับการสนับสนุนโดยเส้นทางการ regexp ดูคำตอบของ @ Cameron สำหรับข้อมูลเพิ่มเติม

— คริสโตเฟอร์ชิช
แหล่งที่มา

3

อย่าลืมไม้keyค้ำยัน

— Neurotransmitter

9

โปรดทราบว่าสิ่งนี้จะทำให้เกิดการนับ (ไม่ต้องการ ... ?) ใหม่เมื่อเปลี่ยนจากเส้นทาง (เช่น / home => / ผู้ใช้ในตัวอย่างนั้น)

— Hertzel Guinness

แน่นอน! ความพึงพอใจอาจขึ้นอยู่กับกรณีการใช้งานและส่วนประกอบของคุณ หากคุณไม่ต้องการต่อเชื่อมใหม่การใช้ regexp ตามที่ระบุในการแก้ไขของฉันอาจทำงานได้ดีกว่า

— Christopher Chiche

6

สำหรับ react-route-dom v5.1.2 คุณสามารถผ่านหลายเส้นทางดังต่อไปนี้

 <Route path={"/home" | "/users" | "/widgets"} component={Home} />

และคุณต้องนำเข้าไฟล์ Home jsx ที่ด้านบน

— Abhishek
แหล่งที่มา

4

ตัวเลือกอื่น ๆ : ใช้คำนำหน้าเส้นทาง /pagesตัวอย่างเช่น. คุณจะได้รับ

/pages/home
/pages/users
/pages/widgets

จากนั้นแก้ไขโดยละเอียดภายในHomeส่วนประกอบ

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

— อาร์เทอร์
แหล่งที่มา

0

ตามเอกสารของ React Router ระบุว่า 'path' proptype เป็นสตริงประเภทดังนั้นจึงไม่มีทางที่คุณจะส่งอาร์เรย์เป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบเส้นทางได้

หากคุณตั้งใจจะเปลี่ยนเส้นทางเท่านั้นคุณสามารถใช้ส่วนประกอบเดียวกันสำหรับเส้นทางอื่นได้โดยไม่มีปัญหา

— วิเจย์กฤษ 93
แหล่งที่มา

1

คำตอบนี้ไม่ถูกต้องอีกต่อไปเนื่องจาก path ยอมรับอาร์เรย์ของสตริงแล้ว ดูคำตอบนี้

— Ben Smith

-1

สำหรับ react-router v4.4 คุณสามารถทำสิ่งนี้ได้ด้านล่าง

เก็บเส้นทางไว้ในตัวแปรและผ่านลงไปด้านล่างและใช้ '|' ตัวดำเนินการ.

let home = "/home" ;
let users = "/users”;
let widgets = "/widgets" ;

<Route path={ {home} | {users} | {widgets} }  component={Home} />

ดังนั้นสำหรับทุกเส้นทางที่ตรงกันมันจะแสดงcomponent={Home}ซึ่งเป็นความต้องการของคุณ ..

— Nischith
แหล่งที่มา