Реагируйте: разница между <Route точный путь = «/» /> и <Route path = «/» />

Может кто-нибудь объяснить разницу между

<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

точный: bool

При значении true будет совпадать, только если путь совпадает с 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>