वैकल्पिक पथ पैरामीटर के साथ राउटर को रीऐक्ट करें

Question

मैं एक वैकल्पिक पथ पैरामीटर के साथ एक पथ घोषित करना चाहता हूं, इसलिए जब मैं इसे कुछ अतिरिक्त करने के लिए पृष्ठ जोड़ता हूं (जैसे कुछ डेटा भरें):

http: // localhost / app / path / to / page <= पृष्ठ प्रस्तुत करना http: // localhost / app / path / to / page / 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

Answer 1

आपके द्वारा पोस्ट किया गया संपादन, प्रतिक्रिया-राउटर (v0.13) के पुराने संस्करण के लिए मान्य था और अब काम नहीं करता है।

---

प्रतिक्रिया रूटर v1, v2 और v3

संस्करण के बाद से 1.0.0आप के साथ वैकल्पिक मापदंडों को परिभाषित:

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

और कई वैकल्पिक मापदंडों के लिए:

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

आप ( )मार्ग के वैकल्पिक भागों को लपेटने के लिए कोष्ठक का उपयोग करते हैं , जिसमें प्रमुख स्लैश ( /) शामिल हैं। आधिकारिक प्रलेखन के रूट मिलान गाइड पृष्ठ की जाँच करें ।

नोट: पैरामीटर एक URL खंड के बगल में से मेल खाता है , या । विशेष रूप से पथों और परिमों के बारे में अधिक जानने के लिए, यहां और पढ़ें ।:paramName/?#

---

राउटर v4 और इसके बाद के संस्करण

React Router v4 मौलिक रूप से v1-v3 से अलग है, और वैकल्पिक पथ मापदंडों को आधिकारिक दस्तावेज में भी स्पष्ट रूप से परिभाषित नहीं किया गया है ।

इसके बजाय, आपको निर्देश दिया जाता है pathकि एक ऐसे पैरामीटर को परिभाषित करें जो पथ-टू-रीजैक्सप समझता हो। यह आपके रास्तों को परिभाषित करने में बहुत अधिक लचीलेपन की अनुमति देता है, जैसे कि दोहराए जाने वाले पैटर्न, वाइल्डकार्ड इत्यादि। इसलिए एक पैरामीटर को वैकल्पिक के रूप में परिभाषित करने के लिए आप एक अनुगामी प्रश्न-चिह्न जोड़ते हैं (? ) ।

जैसे, एक वैकल्पिक पैरामीटर को परिभाषित करने के लिए, आप यह करते हैं:

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

और कई वैकल्पिक मापदंडों के लिए:

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

नोट: रिएक्टर रूटर v4 के साथ असंगत हैप्रतिक्रिया रूटर-रिले( यहाँ और अधिक पढ़ें )। इसके बजाय संस्करण v3 या पूर्व (v2 अनुशंसित) का उपयोग करें।

Comments

यह अभी भी URL में कई वैकल्पिक /route(/:category/(:article)

— पैरामेट्स

@AlexShwarc, अच्छी बात, धन्यवाद। मैंने कई वैकल्पिक मापदंडों को प्रदर्शित करने के लिए कोड जोड़ा। एक नज़र देख लो।

— क्रिस

@ मुझे यकीन है, यह इस तरह से काम नहीं करता है, क्या आपने इसकी जाँच की है?

— एलेक्स शॉर्क

@ 3 संस्करण के साथ क्रिस

— एलेक्स शॅर्क

क्या मैं मुख्य मार्ग के लिए वैकल्पिक पथ परम बना सकता हूं? उदाहरण के लिए मुझे पथ में भाषा परम जोड़ने की जरूरत है, और मेरा होमपेज url "/" और "/ en" होगा यहां डेमो है

— खोलियावको

Answer 2

किसी भी रिएक्ट राउटर v4 उपयोगकर्ताओं के लिए एक खोज के बाद यहां पहुंचने वाले, वैकल्पिक पैरामीटर <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} />

Comments

@ user2928231 धन्यवाद, उनके नए डॉक्स url के साथ अद्यतन। जहां तक ​​मैं बता सकता हूं <Match pattern />कि अब <Route path />फिर से है, लेकिन वैकल्पिक मानदंड को संभालने के लिए प्रश्न चिह्न प्रत्यय अब दृष्टिकोण है।

— जॉन

नमस्ते! मैं अभी भी वैकल्पिक पैरामीटर के साथ एक समस्या है और काम करने के लिए अगले मार्गों नहीं बना सकते: मेरे पास है players, players/123, players/123/edit, players?unseen=true। वैकल्पिक पैरामीटर ?unseenमेरे लिए काम नहीं करता है। हालांकि मैंने इस चर्चा से सभी सुधारों की कोशिश की। क्या आप कृपया उचित पथ स्ट्रिंग की सहायता कर सकते हैं, जो इसे संभाल लेगा? अग्रिम में धन्यवाद!

— खिसयाना स्कार्रोक

हाय @KhrystynaSkvarok, क्या आपने कभी पता लगाया कि कैसे अपना रास्ता w / वैकल्पिक क्वेरी स्ट्रिंग काम कर रहा है? मैं वही करने की कोशिश कर रहा हूं

— sabliao

@sabliao हाय! मेरे पास काम करने का उदाहरण नहीं है, लेकिन URL के लिए जैसे कि example.com/search?query=testअगले पैटर्न का उपयोग करने का प्रयास करें /:search(search)।

— खिसयाना स्कर्वोक

मैं सीमांकक के बाद यूआरएल से कैसे प्राप्त कर सकते हैं?

— PHP निंजा

Answer 3

बहु वैकल्पिक पैरा के लिए कार्य सिंटैक्स:

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

अब, यूआरएल हो सकता है:

1. /अनुभाग
2. / अनुभाग / पेज / 1
3. / अनुभाग / पेज / 1 / तरह / एएससी

Answer 4

कई रास्तों के लिए सिंटैक्स के नीचे प्रतिक्रिया-राउटर V5 और इसके बाद के उपयोग के लिए

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