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

163

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

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

и

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

Я не знаю значение слова "точный"

глинистый сланец
источник
1
Ответы все великолепны. Однако может возникнуть сомнение типа «Почему тогда мы не можем иметь <code> точный </ code> для всех маршрутов?» Представьте себе URL-адрес, похожий на этот. <code> yourreactwebsite.com/getUsers/userId= ? </ code> Это пример, в котором идентификатор пользователя будет динамически подан в URL, поэтому мы не можем использовать здесь <code> точную </ code> опору в вашем маршрутизаторе.
VIJAYKUMAR REDDY ALAVALA

Ответы:

266

В этом примере ничего особенного. Параметр 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подробно объясняют и приводят другие примеры.

Чейз ДеАнда
источник
11
«Но, если бы мы зашли на app.com/users/create , он снова прошел бы по всем нашим определенным маршрутам и вернул бы первое найденное совпадение». - фактически он вернет все маршруты, для которых он нашел соответствие (полное или частичное). Поведение, описанное @Chase DeAnda, произойдет, только если <Route> заключены в тег <Switch>.
watsabitz
4
exactпо умолчанию должен быть по моему мнению
Александр Дерк
А что, если у нас есть каждое определение маршрута в разных компонентах, я имею /admin//usersв виду компонент Admin и компонент /admin/users/createRoot ??? У меня сейчас такая ситуация и типовое exactрешение не работает должным образом.
Юлио Алеман Хименес
Я думаю, что это поведение работает, только если оба маршрута находятся на одном и том же уровне своего родительского коммутатора (или компонента)
Юлио Алеман Хименес,
1
@ChaseDeAnda, что мне нужно, с точностью до наоборот. Возможно я должен написать новый ответ на SO, чтобы прояснить мою ситуацию и получить правильные ответы.
Юлио Алеман Хименес
7

Короче говоря, если у вас есть несколько маршрутов, определенных для маршрутизации вашего приложения, заключенных в 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маршрута.

milkersarac
источник
-1

Самый короткий ответ

Пожалуйста, попробуйте это.

<switch>
   <Route exact path="/" component={Home} />
   <Route path="/about" component={About} />
   <Route path="/shop" component={Shop} />
 </switch>
Джамал Шейх Али
источник
1
Это в основном ничего не объясняет в значении exactатрибута / реквизита и, следовательно, не является «ответом». Вы должны попытаться ответить на вопрос, который на самом деле задается, вместо того, чтобы дать решение проблемы, которую вы не уверены в том, что на самом деле OP имеет.
Виктор Заманян