Tepki: <Rota tam yolu = "/" /> ve <Rota yolu = "/" /> arasındaki fark

Birisi arasındaki farkı açıklayabilir mi?

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

ve

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

'Kesin' kelimesinin anlamını bilmiyorum

Bu örnekte gerçekten hiçbir şey yok. exactParam benzer adlara sahip birden çok yol olduğunda devreye giriyor:

Örneğin, Usersbir kullanıcı listesi gösteren bir bileşenimiz olduğunu varsayalım. Ayrıca CreateUserkullanıcı oluşturmak için kullanılan bir bileşenimiz var. URL'si CreateUsersaltında yuvalanmalıdır Users. Yani kurulumumuz şöyle görünebilir:

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

Şimdi buradaki sorun http://app.com/users, yönlendiriciye gittiğimizde tüm tanımlı rotalarımızdan geçecek ve bulduğu İLK eşleşmeye dönecektir. Yani bu durumda, önce Usersrotayı bulur ve sonra geri döner. Hepsi iyi.

Ancak, gidersek http://app.com/users/createyine tüm tanımlı rotalarımızdan geçer ve bulduğu İLK eşleşmeye döner. React yönlendiricisi kısmi eşleştirme yapar, bu nedenle /userskısmen eşleşir /users/create, bu nedenle yanlış bir şekilde Usersrotayı yeniden döndürür !

exactParam bir güzergah için kısmi eşleştirme devre dışı bırakır ve emin yolu geçerli url, TAM eşleme ise sadece rotayı döndüren yapar.

Yani bu durumda, biz eklemek gerekir exactbizim için Userssadece üzerine uyacak şekilde rota /users:

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

Dokümanlar exactayrıntılı olarak açıklar ve başka örnekler verir.

Kısacası, uygulamanızın rotası için tanımlanmış birden fazla rotanız varsa, Switchbunun gibi bileşenlerle birlikte ;

<Switch>

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

  <Route exact path="/functions" component={Functions} />
  <Route path="/functions/:functionName" component={FunctionDetails} />

</Switch>

Daha sonra exact, yolunun başka bir Rotanın yolu tarafından da dahil edildiği Rotaya anahtar kelime koymanız gerekir . Örneğin, ev yolu /tüm yollara dahil edildiğinden, exactonu ile başlayan diğer yollardan ayırmak için anahtar sözcüğe sahip olması gerekir /. Nedeni de /functionsyola benzer . Gibi başka bir rota yolunu kullanmak isterseniz /functions-detailya /functions/open-dooriçeren /functionsİçinde ardından kullanmak gerekir exactiçin /functionsrota.

Buraya bir göz atın: https://reacttraining.com/react-router/core/api/Route/exact-bool

kesin: bool

Doğru olduğunda, yalnızca yol location.pathnametam olarak eşleşirse eşleşir .

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

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

En kısa cevap

Lütfen bunu deneyin.

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