Какова цель маршрута Wildcard?

Маршруты Wildcard (или маршруты с подстановкой) в Angular используются для обработки несуществующих или неопределённых URL-адресов в приложении. Это особенно полезно, когда вам нужно перенаправить пользователя на страницу с ошибкой ( например, 404) или на главную страницу, если введённый URL не соответствует ни одному из определённых маршрутов.

Как работает Wildcard маршрут?

Wildcard маршруты определяются с использованием символа ** в конфигурации маршрутизации Angular. Этот маршрут должен быть последним в списке маршрутов, чтобы он обрабатывал все не совпадающие пути. Например:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
import {PageNotFoundComponent} from './page-not-found/page-not-found.component';

const routes: Routes = [
    {path: '', component: HomeComponent}, // Корневой маршрут
    {path: '**', component: PageNotFoundComponent} // Wildcard маршрут
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

Пример реализации

В приведённом выше коде мы создаём два маршрута:

Обработка маршрутов

Чтобы увидеть, как это работает на практике, создадим компоненты:

import {Component} from '@angular/core';

@Component({
    selector: 'app-home',
    template: `<h1>Добро пожаловать на главную страницу!</h1>`,
})
export class HomeComponent {
}

@Component({
    selector: 'app-page-not-found',
    template: `<h1>404 - Страница не найдена</h1>`,
})
export class PageNotFoundComponent {
}

Как использовать?

Когда пользователь введет любой путь, который не соответствует существующим маршрутам (например, /unknown), наш Wildcard маршрут сработает, и пользователь будет перенаправлен на компонент PageNotFoundComponent, где он увидит сообщение о том, что страница не найдена.

Заключение

Использование маршрутов Wildcard в Angular — это удобный способ управления ошибками маршрутизации в вашем приложении. Направляя пользователей на страницы с понятными сообщениями, вы улучшаете их опыт взаимодействия с вашим приложением, что в конечном итоге приводит к более высокому уровню удовлетворенности пользователей.