スポンサーリンク

AngularのRouteでリダイレクトする方法

Angularのルーティングによるリダイレクトについて

Angularのルーティングでは、特定のURLを他のURLにリダイレクトすることができます。リダイレクトは、非推奨のURLや特定の条件に基づいてユーザーを適切なページに誘導する際に役立ちます。本記事では、AngularのRouteでリダイレクトを設定する方法を詳しく解説します。

リダイレクト設定の基本

リダイレクトは、redirectToプロパティを使って設定します。リダイレクトでは以下のようにredirectToとpathMatchプロパティを指定します

{ path: '旧URL', redirectTo: '新URL', pathMatch: 'full' }
  • path: リダイレクト元のURLを指定します。
  • redirectTo: リダイレクト先のURLを指定します。
  • pathMatch: マッチ条件を指定します。
    • full: パス全体が一致した場合にリダイレクト。
    • prefix: パスの先頭部分のURL構成が一致した場合にリダイレクト。
      • 例：pathが”old”の場合、old-pageは対象外で、old/1/pageは対象。

リダイレクトの例

http://example.com/old-firstにアクセスした際に、http://example.com/firstにリダイレクトする設定です。

export const routes: Routes = [
    { path: 'first', component: FirstComponent },
    { path: 'second', component: SecondComponent },
    { path: 'old-first',   redirectTo: '/first', pathMatch: 'full' }
];

複雑なリダイレクトを行う

RouteのredirectToには、パス名を設定する代わりに、RedirectFunctionを設定することで複雑なリダイレクトを設定できます。

RedirectFunctionの定義

公式ドキュメントより、以下の定義内容となっていることがわかります。

公式：https://angular.jp/api/router/RedirectFunction?tab=api

type RedirectFunction = (
  redirectData: Pick<
    ActivatedRouteSnapshot,
    'routeConfig' | 'url' | 'params' | 'queryParams' | 'fragment' | 'data' | 'outlet' | 'title'
  >,
) => string | UrlTree

複雑なリダイレクトを設定する

例えば、queryParamsを使い、特定のクエリパラメータが設定されているかどうかを条件にして、ルーティングを制御することができます。

また、このFunction内の処理でサービスをinjectして使ったりすることで、ルーティングをカスタムできます。

export const routes: Routes = [
    { path: 'first', component: FirstComponent },
    { path: 'second', component: SecondComponent },
    {
      path: "old-first",
      redirectTo: ({ queryParams }) => {
        const userIdParam = queryParams['userId'];
        if (userIdParam !== undefined) {
          return `/first`;
        } else {
          return `/second`;
        }
      },
    },
];
スポンサーリンク