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

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”

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.

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.

Spójrz tutaj: https://reacttraining.com/react-router/core/api/Route/exact-bool

ścisłe: bool

Gdy prawda, będzie pasować tylko wtedy, gdy ścieżka location.pathnamedokładnie pasuje do .

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

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

Najkrótsza odpowiedź brzmi

Spróbuj tego.

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