ルーティング ― URLと画面を対応づける

導入

実務のアプリは1画面では収まりません。「/」でトップページ、「/users/1」でユーザー詳細のように、URLごとに違うコンポーネントを表示する仕組みが ルーティング です。

説明

ルート定義（Routes）で、URLのパターンとコンポーネントを対応づけます。

import { Routes, provideRouter, RouterOutlet, RouterLink, ActivatedRoute } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users/:id', component: UserDetailComponent },
  { path: 'admin', component: AdminComponent, canActivate: [authGuard] },
];

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)],
});

画面側は <router-outlet> を置き、routerLink でリンクを作ります。

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <nav>
      <a routerLink="/">ホーム</a>
      <a routerLink="/users/1">ユーザー1</a>
    </nav>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}

// URLの :id 部分（パラメータ）は ActivatedRoute から取り出す
export class UserDetailComponent {
  private route = inject(ActivatedRoute);
  id = this.route.snapshot.paramMap.get('id');
}

flowchart LR
  url["ブラウザのURL<br/>/users/1"]
  router["Router<br/>routesと照合"]
  outlet["router-outlet<br/>に描画"]
  comp["UserDetailComponent<br/>id=1を受け取る"]
  url --> router --> outlet --> comp

• Routes … path（URLのパターン）と component（表示するコンポーネント）の対応表です。
• <router-outlet> … マッチしたコンポーネントが実際に描画される「差し込み口」です。
• routerLink … <a href="..."> の代わりに使います。ページ全体を再読み込みせずに画面を切り替えます。
• :id のようなパラメータは ActivatedRoute の snapshot.paramMap.get('id') で取り出します。
• canActivate: [authGuard] … ガード。そのルートに入る前に条件（ログイン済みかなど）をチェックし、満たさなければ画面遷移を止められます。

まとめ

ルーティングは「URLのパターン ↔ コンポーネント」の対応表（Routes）と、実際の差し込み口（<router-outlet>）で成り立っています。パラメータの取り出しとガードは、実務アプリの詳細画面や認証つきページでほぼ必ず登場します。