Реагуйте: різниця між <Точний шлях маршруту = "/" /> та <Шлях маршруту = "/" />

Може хтось пояснить різницю між

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

і

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

Я не знаю значення "точного"

У цьому прикладі насправді нічого. 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, вона знову пройде всі наші визначені маршрути та поверне ПЕРШУ відповідність, яку вона знайде. Маршрутизатор React робить часткове узгодження, тому /usersчастково збігається /users/create, тому він неправильно поверне Usersмаршрут знову!

Параметр exactвимикає часткове узгодження для маршруту та гарантує, що він повертає маршрут лише у тому випадку, коли шлях відповідає ТОЧНОМУ поточній URL-адресі.

Тож у цьому випадку ми повинні додати exactдо нашого Usersмаршруту, щоб він відповідав лише /users:

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

Документи exactдетально пояснюють та наводять інші приклади.

Якщо коротко, якщо для маршрутизації вашого додатка визначено декілька маршрутів, додані до цього 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маршруту.

Подивіться тут: https://reacttraining.com/react-router/core/api/Route/exact-bool

точно: бул

Якщо це правда, відповідатиме лише якщо шлях відповідає location.pathnameточно.

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

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

Найкоротша відповідь - це

Спробуйте це.

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