Reaguj: różnica między <Route dokładna ścieżka = „/” /> i <Route path = „/” />


162

Czy ktoś może wyjaśnić różnicę między

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

i

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

Nie znam znaczenia słowa „dokładny”


1
Wszystkie odpowiedzi są świetne. Jednak może pojawić się wątpliwość typu „Dlaczego nie możemy mieć <code> dokładnego </code> dla wszystkich tras?” Wyobraź sobie adres URL podobny do tego. <code> twojareactwebsite.com/getUsers/userId= ? </code> To jest przykład, w którym identyfikator użytkownika zostanie dynamicznie wprowadzony do adresu URL, więc nie możemy tutaj użyć właściwości <code> exact </code> w routerze.
VIJAYKUMAR REDDY ALAVALA

Odpowiedzi:


264

W tym przykładzie nic tak naprawdę. Parametr exactpojawia się, gdy masz wiele ścieżek o podobnych nazwach:

Na przykład wyobraź sobie, że mamy Userskomponent, który wyświetla listę użytkowników. Mamy też CreateUserkomponent służący do tworzenia użytkowników. Adres URL CreateUserspowinien być zagnieżdżony w Users. Więc nasza konfiguracja może wyglądać mniej więcej tak:

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

Teraz problem tutaj, kiedy przejdziemy do http://app.com/usersroutera, przejdzie przez wszystkie zdefiniowane przez nas trasy i zwróci PIERWSZE znalezione dopasowanie. W tym przypadku najpierw znajdzie Userstrasę, a następnie ją zwróci. Wszystko dobrze.

Ale gdybyśmy poszli do http://app.com/users/create, ponownie przeszedłby przez wszystkie nasze zdefiniowane trasy i zwrócił PIERWSZE znalezione dopasowanie. Router React wykonuje częściowe dopasowanie, więc /usersczęściowo pasuje /users/create, więc ponownie niepoprawnie zwróci Userstrasę!

Parametr exactwyłącza częściowe dopasowanie dla trasy i zapewnia, że ​​zwraca trasę tylko wtedy, gdy ścieżka jest DOKŁADNIE dopasowana do bieżącego adresu URL.

Więc w tym przypadku powinniśmy dodać exactdo naszej Userstrasy, aby pasowała tylko na /users:

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

Dokumenty exactszczegółowo wyjaśniają i podają inne przykłady.


11
„Ale gdybyśmy przeszli do app.com/users/create , ponownie przeszedłby przez wszystkie zdefiniowane przez nas trasy i zwrócił PIERWSZE znalezione dopasowanie”. - w rzeczywistości zwróci wszystkie trasy, dla których znalazł dopasowanie (pełne lub częściowe). Zachowanie opisane przez @Chase DeAnda będzie miało miejsce tylko wtedy, gdy trasy <Route> są otoczone znacznikiem <Switch>.
watsabitz,

4
exactpowinno być moim zdaniem domyślne
Alexander Derck

A co jeśli mamy każdą definicję trasy w różnych komponentach, to znaczy /admin//usersw komponencie Admin i /admin/users/createkomponencie Root ??? Obecnie mam taką sytuację i typowe exactrozwiązanie nie działa poprawnie.
Yulio Aleman Jimenez

Myślę, że to zachowanie działa tylko wtedy, gdy obie trasy są na tym samym poziomie swojego rodzica Switcha (lub komponentu)
Yulio Aleman Jimenez

1
@ChaseDeAnda to, czego potrzebuję, jest dokładnie odwrotne. Może powinienem napisać nową odpowiedź na SO, aby wyjaśnić moją sytuację i uzyskać prawidłowe odpowiedzi.
Yulio Aleman Jimenez

7

Krótko mówiąc, jeśli masz wiele tras zdefiniowanych dla routingu aplikacji, otoczonych Switchtakim komponentem;

<Switch>

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

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

</Switch>

Następnie musisz umieścić exactsłowo kluczowe w Trasie, której ścieżka jest również zawarta w innej ścieżce. Na przykład ścieżka główna /jest zawarta we wszystkich ścieżkach, więc musi mieć exactsłowo kluczowe, aby odróżnić ją od innych ścieżek, które zaczynają się od /. Powód jest również podobny do /functionsścieżki. Jeśli chcesz użyć innej ścieżki, takiej jak /functions-detaillub /functions/open-doorktóra /functionsw niej zawiera , musisz użyć exactdla /functionstrasy.



-1

Najkrótsza odpowiedź brzmi

Spróbuj tego.

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

1
W zasadzie nie wyjaśnia to znaczenia exactatrybutu / właściwości, a zatem z pewnością nie jest „odpowiedzią”. Powinieneś raczej spróbować odpowiedzieć na pytanie, które jest faktycznie zadawane, zamiast dawać rozwiązanie problemu, którego nie jesteś pewien, czy OP faktycznie ma.
Victor Zamanian,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.