ネームスペースとして利用している親のRouteパスを無効にしたい

以下のような記述を持つ hoge-routing.module.ts があるとします。

const routes: Routes = [{
  path: 'hoge',
  children: [{
    path: 'foo',
    component: FooComponent
  }]
}];

また、 app-routing.module.ts のroutesには、404を表示するための以下のような記述が設定されています。

  {
    path: '**',
    component: NoContentComponent
  }

この時、/hooにアクセスされた場合404用のコンポーネントを表示してほしいのですが、
実際はcomponentを持たないhogeというパスを見に行ってしまうためか、router-outletに何も表示されません

何かよきオプションなどがあればおしえていただければと思います。

以下のような手法は考えました。

アイディア1 親のpathを記述しない

const routes: Routes = [{
  path: '',
  children: [{
    path: 'hoge/foo',
    component: FooComponent
  }, {
    path: 'hoge/bar',
    component: BarComponent
  }]
}];
  • /hogeは404になってくれる
  • routeConfigなどの階層が変わってしまうので、動的にルーティングからデータ作成している私のプロジェクトでは使えない
  • そもそもコレをした場合childrenにする必要ない……?

アイディア2 親のcomponentにNoContentComponentを設定する

const routes: Routes = [{
  path: 'hoge',
  component: NoContentComponent,
  children: [{
    path: 'foo',
    component: FooComponent
  }]
}];
  • /hogeはもちろん404になる
  • 記述量は少ないのだが、全てのモジュールにこれを書くのは泥臭いのと、NoContentComponentへの依存が……
  • しかし、今回の仕様はクリアできるのでこれしか無い気もする?

コレ以外でなにか賢いやり方や、提供されている手法があればお願いします!

/hoge のchildrenに ** を追加して親と同様にNoContentComponentに紐付けるのがベターかなあと思います。ワイルドカードroute ** は階層ごとに宣言できます

1 Like

以下のようなコードですね。

const routes: Routes = [{
  path: 'hoge',
  children: [{
    path: 'foo',
    component: FooComponent
  }, {
    path: '**',
    component: NoContentComponent,
  }]
}];

確かに アイディア2 より、より構造がケースに即していてこっちのほうが良い気がします。

今後、ルーティングモジュールごとに404用コンポーネントを設置していくことにします、ありがとうございました。