प्रतिक्रिया: <मार्ग सटीक पथ = "/"> और <मार्ग पथ = "/" /> के बीच अंतर

Question

क्या कोई अंतर बता सकता है

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

तथा

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

मैं 'सटीक' का अर्थ नहीं जानता

Comments

जवाब सभी शानदार हैं। हालाँकि किसी को भी "सभी कोड के लिए <code> सटीक </ code> क्यों नहीं हो सकता है?" एक URL की कल्पना करें जो कुछ इस तरह है। <code> yourreactwebsite.com/getUsers/userId= ? </ code> यह एक उदाहरण है जहां उपयोगकर्ता की आईडी को गतिशील रूप से URL में फीड किया जाएगा और इसलिए हम यहां आपके राउटर में <code> सटीक </ code> के साथ नहीं जा सकते।

— VIJAYKUMAR REDDY ALAVALA

Answer 1

इस उदाहरण में, वास्तव में कुछ भी नहीं। 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यह फिर से हमारे सभी परिभाषित मार्गों से गुजरेगा और एफआईआरएसटी मैच को लौटाएगा। प्रतिक्रिया राउटर आंशिक मिलान करता है, इसलिए /usersआंशिक रूप से मेल खाता है /users/create, इसलिए यह गलत तरीके Usersसे फिर से मार्ग लौटाएगा !

exactपरम किसी मार्ग के लिए आंशिक मेल अक्षम करता है और यकीन है कि यह केवल मार्ग लौटाता है यदि पथ वर्तमान यूआरएल के लिए एक सटीक मिलान है बनाता है।

तो इस मामले में, हमें exactअपने Usersमार्ग में जोड़ना चाहिए ताकि यह केवल पर मेल खाए /users:

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

डॉक्स exactविस्तार से समझाते हैं और अन्य उदाहरण देते हैं।

Comments

"लेकिन, अगर हम app.com/users/create पर चले गए, तो यह फिर से हमारे सभी परिभाषित मार्गों से गुजरेगा और जो एफआईआरएसटी मैच का पता लगाता है, उसे वापस कर देगा।" - वास्तव में यह सभी मार्गों को लौटा देगा जिसके लिए इसे एक मैच (पूर्ण या आंशिक) मिला। @CASS DeAnda द्वारा वर्णित व्यवहार केवल तभी होगा जब <मार्ग> का टैग <स्विच> टैग द्वारा संलग्न हो।

— वॉट्सबिज

exactमेरी राय में डिफ़ॉल्ट होना चाहिए

— अलेक्जेंडर डर्क

क्या होगा अगर हमारे पास अलग-अलग घटकों में प्रत्येक मार्ग की परिभाषा है, मेरा मतलब /admin//usersव्यवस्थापक घटक में है, और /admin/users/createरूट घटक में ??? वर्तमान में मेरे पास यह स्थिति है और विशिष्ट exactसमाधान ठीक से काम नहीं करता है।

— यूलियो एलेमन जिमेनेज़

मुझे लगता है कि यह व्यवहार तभी काम करता है जब दोनों मार्ग अपने स्विच माता-पिता (या घटक) के समान स्तर पर हों

— यूलियो अलेमन जिमेनेज़

@ChaseDeAnda जो मुझे चाहिए वह ठीक इसके विपरीत है। शायद मुझे अपनी स्थिति स्पष्ट करने और ठीक से उत्तर प्राप्त करने के लिए एसओ पर एक नया उत्तर लिखना चाहिए।

— यूलियो अलेमन जिमेनेज़

Answer 2

संक्षेप में, यदि आपके पास 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मार्ग।

Answer 3

यहां देखें: https://reacttraining.com/react-router/core/api/Route/exact-nool

सटीक: बूल

जब सही है, तभी मैच होगा जब पथ location.pathnameबिल्कुल मेल खाता है।

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

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

Answer 4

सबसे छोटा जवाब है

कृपया यह प्रयास करें।

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

Comments

यह मूल रूप से exactविशेषता / प्रस्ताव का अर्थ समझाने के लिए कुछ भी नहीं करता है , और इस प्रकार निश्चित रूप से एक "उत्तर" नहीं है। आपको उस समस्या को हल करने के बजाय वास्तव में पूछे जाने वाले प्रश्न को हल करने का प्रयास करना चाहिए, जो आपको यकीन नहीं है कि ओपी वास्तव में है।

— विक्टर ज़मानियन