Реакция: разница между <route exact path=//"> а также <route path=//">

Ответ 1

В этом примере ничего нет. exact параметр вступает в игру, когда у вас есть несколько путей, имеющих похожие имена:

Например, представьте, что у нас есть компонент " Users который отображает список пользователей. У нас также есть компонент CreateUser который используется для создания пользователей. URL-адрес CreateUsers должен быть вложен в " Users. Поэтому наша установка может выглядеть примерно так:

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

Теперь проблема здесь, когда мы переходим на http://app.com/users маршрутизатор будет проходить через все наши определенные маршруты и вернуть найденное им ПЕРВОЕ совпадение. Таким образом, в этом случае он сначала найдет маршрут " Users а затем вернет его. Все хорошо.

Но если мы перейдем к http://app.com/users/create, он снова пройдет через все наши определенные маршруты и вернет найденное им ПЕРВОЕ совпадение. React router выполняет частичное совпадение, так что /users частично соответствуют /users/create, поэтому он неправильно вернет маршрут Users снова!

exact параметр отключает частичное согласование маршрута и гарантирует, что он возвращает маршрут только в том случае, если путь соответствует EXACT-совпадению с текущим URL-адресом.

Поэтому в этом случае мы должны добавить exact маршрут наших Users чтобы он соответствовал только /users:

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

Документы объяснить exact в деталях и дать другие примеры.

Ответ 2

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

Ответ 3

Ответы все великолепны. Однако у кого-то может возникнуть сомнение: "Почему тогда мы не можем иметь exact для всех маршрутов?" Представьте себе URL-адрес, похожий на этот. https://yourreactwebsite.com/getUsers/userId=? Это пример, в котором идентификатор пользователя будет динамически вводиться в URL, поэтому мы не можем указать exact реквизит в вашем маршрутизаторе.

Ответ 4

точный: bool

При значении true будет совпадать, только если путь в точности совпадает с location.pathname.

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

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

Посмотрите здесь:https://reacttraining.com/react-router/core/api/Route/exact-bool