ルートのリダイレクトを使用すると、ユーザーをあるルートから別のルートへ自動的にナビゲートできます。ある住所宛の郵便物が別の住所に転送される郵便転送のように考えてください。これは、レガシーURLの処理、デフォルトルートの実装、またはアクセスコントロールの管理に役立ちます。
リダイレクトの設定方法
ルート設定でredirectTo
プロパティを使用してリダイレクトを定義できます。このプロパティは文字列を受け入れます。
import { Routes } from '@angular/router';const routes: Routes = [ // Simple redirect { path: 'marketing', redirectTo: 'newsletter' }, // Redirect with path parameters { path: 'legacy-user/:id', redirectTo: 'users/:id' }, // Redirect any other URLs that don’t match // (also known as a "wildcard" redirect) { path: '**', redirectTo: '/login' }];
この例では、3つのリダイレクトがあります。
- ユーザーが
/marketing
パスにアクセスすると、/newsletter
にリダイレクトされます。 - ユーザーが
/legacy-user/:id
パスにアクセスすると、対応する/users/:id
パスにルーティングされます。 - ユーザーがルーターで定義されていないパスにアクセスすると、
**
ワイルドカードパス定義によりログインページにリダイレクトされます。
pathMatch
の理解
pathMatch
プロパティは、AngularがURLをルートにどのように一致させるかを開発者が制御できるようにします。
pathMatch
が受け入れる値は2つあります。
値 | 説明 |
---|---|
'full' |
URLパス全体が完全に一致する必要があります |
'prefix' |
URLの先頭のみが一致する必要があります |
デフォルトでは、すべてのリダイレクトはprefix
戦略を使用します。
pathMatch: 'prefix'
pathMatch: 'prefix'
はデフォルトの戦略であり、リダイレクトをトリガーするときにAngular Routerが後続のすべてのルートに一致させたい場合に理想的です。
export const routes: Routes = [ // This redirect route is equivalent to… { path: 'news', redirectTo: 'blog }, // This explicitly defined route redirect pathMatch { path: 'news', redirectTo: 'blog', pathMatch: 'prefix' },];
この例では、news
でプレフィックスされたすべてのルートは、対応する/blog
にリダイレクトされます。以下は、ユーザーが古いnews
プレフィックスにアクセスしたときにリダイレクトされる例です。
/news
は/blog
にリダイレクトされます/news/article
は/blog/article
にリダイレクトされます/news/article/:id
は/blog/article/:id
にリダイレクトされます
pathMatch: 'full'
一方、pathMatch: 'full'
は、Angular Routerに特定のパスのみをリダイレクトさせたい場合に役立ちます。
export const routes: Routes = [ { path: '', redirectTo: '/dashboard', pathMatch: 'full' },];
この例では、ユーザーがルートURL(つまり''
)にアクセスするたびに、ルーターはそのユーザーを'/dashboard'
ページにリダイレクトします。
後続のページ(例: /login
、/about
、/product/id
など)は無視され、リダイレクトはトリガーされません。
TIP: ルートページ(つまり"/"
または""
)でリダイレクトを設定する際は注意してください。pathMatch: 'full'
を設定しない場合、ルーターはすべてのURLをリダイレクトします。
これをさらに説明するために、前のセクションのnews
の例でpathMatch: 'full'
を使用した場合:
export const routes: Routes = [ { path: 'news', redirectTo: '/blog', pathMatch: 'full' },];
これは次のことを意味します。
/news
パスのみが/blog
にリダイレクトされます。/news/articles
や/news/articles/1
のような後続のセグメントは、新しい/blog
プレフィックスでリダイレクトされません。
条件付きリダイレクト
redirectTo
プロパティは、ユーザーがリダイレクトされる方法にロジックを追加するために、関数を受け入れることもできます。
関数は、ルートマッチングフェーズでは一部のデータが正確に不明であるため、ActivatedRouteSnapshot
データの一部のみにアクセスできます。例としては、解決されたタイトル、遅延読み込みされたコンポーネントなどがあります。
通常、文字列またはURLTree
を返しますが、observableまたはpromiseを返すこともできます。
以下は、時間帯に基づいてユーザーが異なるメニューにリダイレクトされる例です。
import { Routes } from '@angular/router';import { MenuComponent } from './menu/menu.component';export const routes: Routes = [ { path: 'restaurant/:location/menu', redirectTo: (activatedRouteSnapshot) => { const location = activatedRouteSnapshot.params['location']; const currentHour = new Date().getHours(); // Check if user requested a specific meal via query parameter if (activatedRouteSnapshot.queryParams['meal']) { return `/restaurant/${location}/menu/${queryParams['meal']}`; } // Auto-redirect based on time of day if (currentHour >= 5 && currentHour < 11) { return `/restaurant/${location}/menu/breakfast`; } else if (currentHour >= 11 && currentHour < 17) { return `/restaurant/${location}/menu/lunch`; } else { return `/restaurant/${location}/menu/dinner`; } } }, // Destination routes { path: 'restaurant/:location/menu/breakfast', component: MenuComponent }, { path: 'restaurant/:location/menu/lunch', component: MenuComponent }, { path: 'restaurant/:location/menu/dinner', component: MenuComponent }, // Default redirect { path: '', redirectTo: '/restaurant/downtown/menu', pathMatch: 'full' }];
詳細については、RedirectFunctionのAPIドキュメントを参照してください。
次のステップ
redirectTo
プロパティの詳細については、APIドキュメントを参照してください。