Перемещение между вложенными переключателями в реагирует маршрутизатор v4

Question

В моем приложении есть вложенные переключатели, и я пытаюсь понять, как создать ссылку для перехода от одного к другому.Приложение структурировано так:

App
  Main switch (/)
    Assets switch (/assets/)
      Table component with Link
    Templates switch (/templates/)
      Object viewer component to be linked too

Компонент ссылки выглядит следующим образом, а id - это шаблоны UUID:

<Link to={`/templates/${id}`} {...itemProps} />

Но когда вы нажимаете ссылку, вы переходите к / assets/correct-UUID.

Я не могу найти какую-либо информацию по этому поводу, поэтому я не уверен, является ли это классической промежуточной проблемой, не описанной в учебниках, что-то, что невозможно, или я просто делаючто-то не так.Кто-нибудь знает, какой это?

Answer 1

Это противоречит назначению коммутатора и маршрутизатора одновременно.Из документов :

Отображает первый дочерний элемент <Route> или <Redirect>, который соответствует местоположению.

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

import { Switch, Route } from 'react-router'

<Switch>
  <Route exact path="/" component={Main}/>
  <Route path="/assets" component={Assets}/>
  <Route path="/templates" component={Templates}/>
</Switch>

Итак, вы определяете свои маршруты в точке входа вашего приложения, скажем, App.js.И это все, если вы хотите больше маршрутов, добавьте их туда.Если вам нужны вложенные маршруты, вы вкладываете их буквально: <Route path="/assets/:id/update" component={AssetUpdate} />.Вот и все, что нужно.