ルートへのナビゲーション

RouterLinkディレクティブは、Angularのナビゲーションに対する宣言的なアプローチです。これにより、Angularのルーティングシステムとシームレスに統合される標準のアンカー要素（<a>）を使用できます。

RouterLinkの使い方

通常のアンカー要素<a>にhref属性を使用する代わりに、Angularルーティングを活用するために、適切なパスを持つRouterLinkディレクティブを追加します。

import {RouterLink} from '@angular/router';

@Component({
  template: `
    <nav>
      <a routerLink="/user-profile">User profile</a>
      <a routerLink="/settings">Settings</a>
    </nav>
  `,
  imports: [RouterLink],
  ...
})
export class App {}

絶対リンクと相対リンクの使用

Angularルーティングにおける相対URLは、現在のルートの場所に対するナビゲーションパスを定義できます。これは、プロトコル（例: http://）とルートドメイン（例: google.com）を含む完全なパスを持つ絶対URLとは対照的です。

<!-- Absolute URL -->
<a href="https://www.angular.dev/essentials">Angular Essentials Guide</a>

<!-- Relative URL -->
<a href="/essentials">Angular Essentials Guide</a>

この例では、最初の例は、基本概念ページに対してプロトコル（つまりhttps://）とルートドメイン（つまりangular.dev）が明示的に定義された完全なパスを含んでいます。対照的に、2番目の例は、ユーザーがすでに/essentialsの正しいルートドメインにいることを前提としています。

一般的に、相対URLは、ルーティング階層内での絶対位置を知る必要がないため、アプリケーション全体でより保守しやすく、推奨されます。

相対URLの仕組み

Angularルーティングには、相対URLを定義するための2つの構文があります。文字列と配列です。

<!-- Navigates user to /dashboard -->
<a routerLink="dashboard">Dashboard</a>
<a [routerLink]="['dashboard']">Dashboard</a>

HELPFUL: 文字列を渡すのが、相対URLを定義する最も一般的な方法です。

相対URLで動的なパラメーターを定義する必要がある場合は、配列構文を使用します。

<a [routerLink]="['user', currentUserId]">Current User</a>

さらに、Angularルーティングでは、相対パスの先頭にスラッシュ（/）を付けるかどうかによって、パスを現在のURLに対する相対パスにするか、ルートドメインに対する相対パスにするかを指定できます。

たとえば、ユーザーがexample.com/settingsにいる場合、さまざまなシナリオで異なる相対パスを定義する方法を次に示します。

<!-- Navigates to /settings/notifications -->
<a routerLink="notifications">Notifications</a>
<a routerLink="/settings/notifications">Notifications</a>

<!-- Navigates to /team/:teamId/user/:userId -->
<a routerLink="/team/123/user/456">User 456</a>
<a [routerLink]="['/team', teamId, 'user', userId]">Current User</a>

RouterLinkがテンプレートでの宣言的なナビゲーションを処理する一方で、Angularはロジック、ユーザーアクション、またはアプリケーションの状態に基づいてナビゲートする必要があるシナリオのために、プログラムによるナビゲーションを提供します。Routerを注入することで、ルートへ動的にナビゲートし、パラメーターを渡し、TypeScriptコードでナビゲーションの動作を制御できます。

`router.navigate()`

router.navigate()メソッドを使用して、URLパス配列を指定することで、ルート間をプログラムでナビゲートできます。

import {Router} from '@angular/router';

@Component({
  selector: 'app-dashboard',
  template: ` <button (click)="navigateToProfile()">View Profile</button> `,
})
export class AppDashboard {
  private router = inject(Router);

  navigateToProfile() {
    // Standard navigation
    this.router.navigate(['/profile']);

    // With route parameters
    this.router.navigate(['/users', userId]);

    // With query parameters
    this.router.navigate(['/search'], {
      queryParams: {category: 'books', sort: 'price'},
    });

    // With matrix parameters
    this.router.navigate(['/products', {featured: true, onSale: true}]);
  }
}

router.navigate()は、シンプルおよび複雑なルーティングシナリオの両方をサポートしており、ルートパラメーター、クエリパラメーターを渡し、ナビゲーションの動作を制御できます。

また、relativeToオプションを使用して、ルーティングツリー内のコンポーネントの場所に対する動的なナビゲーションパスを構築できます。

import {Router, ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-user-detail',
  template: `
    <button (click)="navigateToEdit()">Edit User</button>
    <button (click)="navigateToParent()">Back to List</button>
  `,
})
export class UserDetail {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  // Navigate to a sibling route
  navigateToEdit() {
    // From: /users/123
    // To:   /users/123/edit
    this.router.navigate(['edit'], {relativeTo: this.route});
  }

  // Navigate to parent
  navigateToParent() {
    // From: /users/123
    // To:   /users
    this.router.navigate(['..'], {relativeTo: this.route});
  }

  navigateToList() {
    // Angular resolves the commands array as a single navigation path relative to the current route.
    // From: /users/123
    // Result: /users/list
    this.router.navigate(['..', 'list'], {relativeTo: this.route});
  }
}

When navigating multiple levels up, all .. segments must be in the first element of the commands array. The router only parses .. from the first command string — subsequent array elements are treated as literal path segments.

Prefer

// From: /team/123/users/456
// Result: /team/123/settings
this.router.navigate(['../../settings'], {relativeTo: this.route});

When using relativeTo, never prefix the first command with /. A leading / makes the navigation absolute and ignores relativeTo entirely.

Prefer

// From: /team/123/users/456
// Result: /team/123/users/456/edit
this.router.navigate(['edit'], {relativeTo: this.route});

Avoid

// From: /team/123/users/456
// Leading '/' causes absolute navigation — relativeTo is ignored
// Result: /edit
this.router.navigate(['/edit'], {relativeTo: this.route});

`router.navigateByUrl()`

router.navigateByUrl()メソッドは、配列セグメントではなくURLパス文字列を使用してプログラムでナビゲートする直接的な方法を提供します。このメソッドは、完全なURLパスがあり、絶対ナビゲーションを実行する必要がある場合に最適です。特に、外部から提供されるURLやディープリンクのシナリオで役立ちます。

// Standard route navigation
router.navigateByUrl('/products');

// Navigate to nested route
router.navigateByUrl('/products/featured');

// Complete URL with parameters and fragment
router.navigateByUrl('/products/123?view=details#reviews');

// Navigate with query parameters
router.navigateByUrl('/search?category=books&sortBy=price');

// With matrix parameters
router.navigateByUrl('/sales-awesome;isOffer=true;showModal=false');

履歴内の現在のURLを置き換える必要がある場合、navigateByUrlはreplaceUrlオプションを持つ設定オブジェクトも受け入れます。

// Replace current URL in history
router.navigateByUrl('/checkout', {
  replaceUrl: true,
});

Display a different URL in the address bar

You can pass a browserUrl option to navigateByUrl to display a different URL in the browser's address bar than the one used for route matching.

This is useful when you want to redirect a user to a different route—such as an error page—without changing the URL that the user originally tried to visit.

router.navigateByUrl('/not-found', {browserUrl: '/products/missing-item'});

Angular navigates to and renders the /not-found route, but the browser address bar shows /products/missing-item.

NOTE: browserUrl only affects what appears in the browser's address bar.

Customizing the browser URL with RouterLink

The RouterLink directive also supports a browserUrl input, which lets you control the URL displayed in the browser's address bar when a link is clicked, independently of the route Angular navigates to.

<!-- Navigates to /dashboard, but the address bar shows /home -->
<a [routerLink]="['/dashboard']" [browserUrl]="'/home'">Go to Dashboard</a>

You can also bind a UrlTree for more dynamic use cases:

import {Component, inject} from '@angular/core';
import {Router, RouterLink, UrlTree} from '@angular/router';

@Component({
  template: `
    <a [routerLink]="['/products', product.id]" [browserUrl]="displayUrl">
      {{ product.name }}
    </a>
  `,
  imports: [RouterLink],
})
export class ProductList {
  private router = inject(Router);

  product = {id: 42, name: 'Widget'};

  // Create a UrlTree to display in the address bar
  displayUrl: UrlTree = this.router.createUrlTree(['/products', 'widget']);
}

次のステップ

レスポンシブでコンテキストを認識するコンポーネントを作成するために、ルートの状態を読み取る方法を学びましょう。