React Router Switch и точный путь

Хотя в вашем случае вы можете получить тот же эффект, используя точное, но это может быть не всегда так. Однако в случаях, когда один из ваших маршрутов содержит вложенный маршрут, если у вас есть точный маршрут на верхнем уровне, вы не можете использовать вложенные маршруты.

Switch в приведенном выше случае служит этой цели, поскольку отображает только первое совпадение

Например,

Скажем, Домашний маршрут содержит вложенные маршруты, например

const Home = (props) => (
     <div>
          <Route path = "/dashboard" component = {Dashboard}/>
          <Route path = "/layout" component = {Layout}/>
     </div>
)

Итак, теперь, если вы напишете

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

и когда вы посещаете /dashboard. Этот компонент Dashboard не может быть визуализирован, поскольку ни один маршрут не совпадает с /dashboard на верхнем уровне.

Чтобы пример работал правильно, вы можете использовать Switch и переупорядочить маршруты так, чтобы пути, которые являются префиксами к другим путям, находились в конце.

<Switch>
  <Route path = "/a" component = {A} />
  <Route path = "/b" component = {B} />
  <Route path = "/" component = {Home} />
</Switch>

По сути, ключевое слово «точное» служит одной и той же цели. (ПРИМЕЧАНИЕ: алгоритм сопоставления, который использует проверки, чтобы увидеть, начинается ли текущий URL с этого пути.) Но пока мы используем, порядок объявления маршрута или специфичности имеет значение. Более конкретный маршрут нужно добавить вверху. В твоем случае

<Switch>
<Route path = "/a" component = {A} />
<Route path = "/b" component = {B} />
<Route exact path = "/" component = {Home} />
</Switch>

В случае «точного», когда вы передаете «точный», этот маршрут будет соответствовать только в том случае, если путь совпадает точно. В вашем случае домашний путь установлен на точное.

<Route exact path = "/" component = {Home} />
<Route path = "/a" component = {A} />
<Route path = "/b" component = {B} />

Позвольте мне описать отличительные особенности Route, exact и Switch:

• Route выполняет частичное сопоставление. Путь маршрута совпадает включительно (совпадает со многими).

• exact удаляет частичное совпадение. Он может соответствовать нескольким маршрутам, если мы используем в маршрутах подстановочные знаки.

• Switch отображает только первый совпадающий маршрут. Путь Switch совпадает исключительно (соответствует только одному).

Чтобы объяснить подробно, я хочу проиллюстрировать, как работает сопоставление маршрутов с exact и без него. Предположим, у нас есть приведенный ниже код, и мы не используем exact.

Итак, если мы посетим URL-адрес /pagetwo, Route выполнит частичное сопоставление и отобразит оба маршрута. Посмотрим, как это будет происходить. На приведенной ниже иллюстрации мы смотрим на адресную строку и путь, по которому мы идем (извлеченный путь), а также на какой маршрут (-ы) выполняется (-ые) сопоставление. Итак, Route будет отображать маршрут, когда extractedPath.contains(path-in-our-Route-declaration) оценивается как истинное.

Надеюсь, это прояснит, как Route работает за сценой. Чтобы избежать этого частичного совпадения, мы используем exact. Использование exact решает проблему до тех пор, пока мы не столкнемся с некоторыми частными случаями. Предположим, у нас есть два маршрута вроде:

• /users/create
• /users/* (подстановочный знак в маршруте).

В приведенном выше случае exact будет соответствовать обоим маршрутам. Итак, для решения таких проблем мы можем использовать Switch. Он отображает только один маршрут и любой маршрут, который будет сопоставлен первым. Итак, здесь порядок, в котором вы определяете свои маршруты, имеет значение.