React Router में एक ही घटक के लिए कई पथ नाम

113

मैं तीन अलग-अलग मार्गों के लिए एक ही घटक का उपयोग कर रहा हूं:

<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>

— चेतन गर्ग
स्रोत

2

प्रतिक्रिया-राउटर 4.4.0 के रूप में, अब आप अपने सुझाव के समान तरीके से एक सरणी पथ निर्दिष्ट कर सकते हैं। मेरा जवाब यहां देखें ।

— बेन स्मिथ

137

प्रतिक्रिया-राउटर v4.4.0-beta.4 के रूप में , और आधिकारिक तौर पर v5.0.0 में, आप अब उन पथों की एक सरणी निर्दिष्ट कर सकते हैं जो एक घटक को हल करते हैं उदा।

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

सरणी में प्रत्येक पथ एक नियमित अभिव्यक्ति स्ट्रिंग है।

इस दृष्टिकोण के लिए प्रलेखन यहां पाया जा सकता है ।

— बेन स्मिथ
स्रोत

5

मेरा मानना है कि यह सबसे अच्छा जवाब है। @Cameron का जवाब किसी भी रास्ते में पूर्ण regexp सुविधा का समर्थन नहीं करता है (कम से कम मैं ऐसा करने में सक्षम नहीं था)।

— क्रिस्टोफर रेगनर

2

मैं exactएकल पथ के लिए विशेषता कैसे सेट करूं ?

— जूलियनसोटो

1

@ जूलियनसोटो सटीक पथ के साथ एक एकल पथ के साथ एक घटक के लिए एक रूट बनाएँ। आप सटीक विशेषता के बिना पथ के एक सरणी के साथ एक ही घटक के लिए एक और मार्ग बना सकते हैं।

— बेन स्मिथ

मैं yarn upgrade4.3 से 4.4 तक नहीं कर सकता । क्या यह आधिकारिक तौर पर जारी किया गया है?

— ndtreviv

@ndtreviv प्रतिक्रिया राउटर परिवर्तन लॉग को देखकर मैं देख सकता हूं कि फीचर को v4.4.0 बीटा 4 में रोल आउट किया गया था। मैं नवीनतम संस्करण में अपग्रेड करने की सलाह दूंगा, जो लिखने के समय यह v5.5.0 है। आप इसे "यार्न अपग्रेड रिएक्शन-राउटर

— बेन स्मिथ

115

कम से कम प्रतिक्रिया-राउटर v4 के साथ pathएक नियमित अभिव्यक्ति स्ट्रिंग हो सकता है, इसलिए आप ऐसा कुछ कर सकते हैं:

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

जैसा कि आप देख सकते हैं कि यह थोड़ा वर्बोज़ है, अगर आपका component/ routeइस तरह सरल है, तो शायद यह इसके लायक नहीं है।

और निश्चित रूप से अगर यह वास्तव में अक्सर आता है, तो आप हमेशा एक सरणी pathsपैरामीटर में एक रैपिंग घटक बना सकते हैं , जो रेगेक्स या .mapतर्क को पुन: करता है।

— कैमरून
स्रोत

5

महान विचार @Cameron। मुझे केवल उन रास्तों से मेल करने के लिए इसे संशोधित करना उपयोगी लगा, जो किसी एक समूह से शुरू होते हैं: /^\/(home|users|widgets)/ अब, /widgetsमेल खाएंगे, लेकिन /dashboard/widgetsमेल नहीं खाएंगे।

— टॉवलर

4

महान होना चाहिए, लेकिन अब के लिए प्रकार regex प्रोप-प्रकार सत्यापन पर मान्य नहीं है: Warning: Failed prop type: Invalid prop path` के regexpलिए आपूर्ति की गई प्रकार की Route, अपेक्षित। string`

— Fábio Paiva

@ FábioPaiva हाँ, मुझे अभी भी पता नहीं चला है कि मार्ग में एक मनमाना रेगेक्स कैसे रखा जाए

— Atav32

1

इसे स्ट्रिंग के रूप में <Route path="/(new|edit)/user/:id?" ... />

— रखें

2

साथ काम नहीं कर रहाpath={`/(${ROUTES.HOME}|${ROUTES.HOME_1})/`}

— मुर्तजा हुसैन

43

मुझे नहीं लगता कि यदि आप v4 की तुलना में कम रिएक्टर राउटर के संस्करण का उपयोग करते हैं।

आप का उपयोग कर सकते हैं mapजैसा कि आप किसी भी अन्य JSX घटक के साथ करेंगे हालांकि:

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

संपादित करें

जब तक यह पाथ-टू-रेगेक्सपी द्वारा समर्थित है, तब तक आप प्रतिक्रिया-राउटर v4 में पथ के लिए एक रेगेक्स का उपयोग कर सकते हैं । अधिक जानकारी के लिए @ कैमरन का उत्तर देखें।

— क्रिस्टोफर चिचे
स्रोत

3

keyप्रस्ताव मत भूलना ।

— न्यूरोट्रांसमीटर

9

ध्यान दें कि इससे (अवांछित ...?) पथ से स्विच करते समय पता चलता है (उदाहरण के लिए / home => / उपयोगकर्ता इस उदाहरण में)

— हर्ट्ज़ेल गिनीज

वास्तव में! वांछनीयता संभवतः आपके उपयोग के मामले और आपके घटकों पर निर्भर करती है। यदि आप रिमूव नहीं करना चाहते हैं, तो regexp का उपयोग करके जैसा कि मेरे संपादन में संकेत दिया गया है, बेहतर काम कर सकता है।

— क्रिस्टोफर चिचे

5

प्रतिक्रिया-मार्ग-डोम v5.1.2 के रूप में आप नीचे के रूप में कई पथ पारित कर सकते हैं

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

और मोटे तौर पर आपको शीर्ष पर होम jsx फ़ाइल आयात करने की आवश्यकता है।

— अभिषेक
स्रोत

4

अन्य विकल्प: रूट उपसर्ग का उपयोग करें। /pagesउदाहरण के लिए। तुम्हे मिल जाएगा

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

और फिर इसे Homeघटक के अंदर एक विस्तृत तरीके से हल करें ।

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

— arturtr
स्रोत

0

रिएक्ट राउटर के अनुसार, प्रॉपेप्ट 'पथ' टाइप स्ट्रिंग का है। इसलिए ऐसा कोई तरीका नहीं है जिससे आप रूट कंपोनेंट के लिए प्रॉपर के रूप में एक सरणी पास कर सकें।

यदि आपका इरादा केवल मार्ग बदलने का है तो आप अलग-अलग मार्ग के लिए एक ही घटक का उपयोग कर सकते हैं

— Vijaykrish93
स्रोत

1

यह उत्तर अब सही नहीं है क्योंकि पथ अब स्ट्रिंग की एक सरणी स्वीकार करता है। इस जवाब को देखें ।

— बेन स्मिथ

-1

प्रतिक्रिया-राउटर v4.4 के रूप में आप नीचे कुछ ऐसा कर सकते हैं।

एक चर में पथ को स्टोर करें और नीचे से गुजरें और उपयोग करें '| ऑपरेटर।

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

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

इसलिए सभी मार्गों के लिए यह मेल खाता है component={Home}जो आपकी जरूरत है।

— Nischith
स्रोत