Перенаправления (redirectTo), wildcard-маршруты (**) в Angular Router

1. Перенаправления (redirectTo): теория и практика

В реальных приложениях пользователи (и поисковики, и даже вы сами) могут попытаться перейти по несуществующему адресу. Например, если пользователь вручную изменит URL или старый адрес остался в закладках. Если не обработать такие ситуации, Angular просто покажет пустую страницу или ничего не покажет вовсе — а это не очень user-friendly.

Перенаправления (redirect) позволяют автоматически направлять пользователя с одного маршрута на другой. Например:

• Если пользователь зашёл на /, а вы хотите, чтобы он видел /home.
• Если страница устарела, и теперь её контент доступен по другому адресу.

Wildcard-маршрут (маршрут-«подстановщик», «ловушка», **) — это способ поймать все неизвестные, неописанные в роутинге пути. Обычно его используют для показа страницы 404 или для автоматического перенаправления на главную.

Как работает redirectTo

В массиве маршрутов Angular можно настроить маршрут так, чтобы при попытке открыть определённый путь пользователь автоматически перенаправлялся на другой путь. Для этого используется свойство redirectTo.

Синтаксис:

{ path: 'старый-путь', redirectTo: 'новый-путь' }

Простой пример: перенаправление с корня

Допустим, вы хотите, чтобы при заходе на / (корень сайта) пользователь попадал на /home.

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  // ... другие маршруты
];

Важный нюанс: pathMatch

• pathMatch: 'full' — означает, что путь должен совпадать полностью (иначе Angular может вести себя неожиданно).
• Если не указать pathMatch, Angular попытается сопоставить путь частично, что часто приводит к бесконечным редиректам или неправильной работе роутинга.

Запомните:
Если делаете редирект с пустого пути (''), всегда пишите pathMatch: 'full'.

Перенаправление устаревших маршрутов

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

const routes: Routes = [
  { path: 'old-dashboard', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  // ...
];

Теперь если кто-то вдруг зайдёт на /old-dashboard, Angular мгновенно отправит его на /dashboard.

2. Wildcard-маршрут (**): ловим всё, что не поймали другие

Что такое wildcard-маршрут

** — это специальный путь, который означает «любой маршрут, который не был описан выше». Он всегда должен быть последним в массиве маршрутов, иначе он перехватит вообще всё.

Пример:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // ... другие маршруты
  { path: '**', component: NotFoundComponent }
];

Теперь если пользователь введёт адрес /abracadabra (или любой другой, не описанный в маршрутах), он увидит компонент NotFoundComponent — обычно это страница с сообщением "404: Страница не найдена".

Зачем это нужно

• Улучшает UX: пользователь не сталкивается с пустым экраном.
• Можно сделать красивую кастомную страницу ошибки или даже предложить перейти на главную.

3. Практика: делаем страницу 404 и редиректы

Создадим компонент для 404

ng generate component not-found

В файле not-found.component.html напишите что-нибудь душевное:

<h2>404: Такой страницы не существует!</h2>
<a routerLink="/home">На главную</a>

Добавим wildcard-маршрут

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // ... другие маршруты
  { path: '**', component: NotFoundComponent }
];

Редиректим устаревший путь

Допустим, раньше у вас был маршрут /main, но теперь он /home:

{ path: 'main', redirectTo: 'home', pathMatch: 'full' }

Итоговый пример массива маршрутов

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'main', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

Как это работает в приложении

• Заходите на / → попадаете на /home.
• Заходите на /main → попадаете на /home.
• Заходите на /abracadabra → видите страницу 404.
• Заходите на /about → видите AboutComponent.

4. Полезные нюансы

Как работает порядок маршрутов

Порядок маршрутов в массиве важен! Angular проверяет маршруты сверху вниз и выбирает первый подходящий.

Если поставить wildcard (**) в начало, то он перехватит вообще все адреса, и остальные маршруты никогда не сработают. Поэтому всегда ставьте его последним.

Wildcard + redirect: когда это бывает полезно

Иногда вместо показа страницы 404 вы хотите, чтобы пользователь автоматически попадал на главную (или другую страницу), если он ошибся адресом.

{ path: '**', redirectTo: 'home', pathMatch: 'full' }

Это не очень дружелюбно (пользователь не поймёт, что ошибся), но иногда бывает полезно, например, в закрытых корпоративных приложениях.

Примеры с вложенными маршрутами и wildcard

Wildcard можно использовать и внутри вложенных маршрутов (child routes).

Пример:

const routes: Routes = [
  {
    path: 'admin',
    component: AdminLayoutComponent,
    children: [
      { path: 'stats', component: AdminStatsComponent },
      { path: '**', component: AdminNotFoundComponent }
    ]
  },
  { path: '**', component: NotFoundComponent }
];

• Если пользователь зашёл на /admin/abracadabra, он увидит AdminNotFoundComponent.
• Если зашёл на /abracadabra, увидит обычную 404.

5. Типичные ошибки при работе с redirectTo и wildcard-маршрутами

Ошибка №1: Не указан pathMatch
Самая частая ошибка — забыть указать pathMatch: 'full' при редиректе с пустого пути (''). В этом случае Angular может начать бесконечно перенаправлять пользователя, и страница просто не загрузится.

Ошибка №2: Wildcard не в конце
Если поставить маршрут с path: '**' не в самом конце массива, он перехватит все адреса, и остальные маршруты никогда не сработают. Всегда размещайте wildcard последним!

Ошибка №3: Конфликт путей
Если у вас есть маршруты, которые частично совпадают с wildcard (например, path: 'user/:id' и path: '**'), убедитесь, что специфичные маршруты стоят выше wildcard.

Ошибка №4: Редирект на несуществующий путь
Если вы делаете redirectTo на маршрут, которого нет, пользователь попадёт на wildcard (404) или снова в редирект, что может привести к бесконечному циклу.

Ошибка №5: Wildcard + redirectTo без 404
Если вы всегда делаете wildcard с редиректом, пользователь никогда не узнает, что он ошибся адресом. Иногда лучше показать отдельную страницу ошибки.