Опыт 03 · Routing · Учебная заметка

Маршрут отвечает за отдельный экран

Связываем адрес со страницей и отделяем обзор от деталей.

Начните с понятных адресов

Раздел `/tasks` показывает список, а `/tasks/:id` — одну задачу. Такой адрес можно открыть повторно или отправить другому человеку. Выбор записи не нужно прятать только во внутреннем состоянии главной страницы.

Различайте экран и встраиваемый компонент

Маршрут открывает экран. Мелкая карточка внутри списка остаётся обычным компонентом. Если у виджета нет самостоятельного состояния страницы и смысла по отдельному URL, дополнительный маршрут ему не нужен.

Обработайте отсутствующую запись

Корректный путь с параметром не гарантирует, что задача существует. Экран деталей должен объяснить, что запись не найдена, и дать рабочую ссылку назад. Не оставляйте пользователя с пустым блоком.

Пример для разбора

export const routes: Routes = [
  { path: "tasks", component: TaskList },
  { path: "tasks/:id", loadComponent: () =>
      import("./task-details").then(m => m.TaskDetails) },
  { path: "**", component: NotFound }
];

Теперь ваша очередь

Откройте прямой URL с существующим и несуществующим id. Проверьте заголовок и ссылку к списку в обоих случаях.

Первоисточник: официальная документация по теме ↗