「Invalid configuration of route ”: redirectTo and children cannot be used together」が出たときの原因と対処法

当ページのリンクには広告が含まれている場合があります。

先日、Angularでルーティングまわりの実装を行っていたところ、以下のようなエラーが発生しました。

Invalid configuration of route '': redirectTo and children cannot be used together

app-routing.module.tsの中でchildrenを設定し、入れ子でルーティングしようとしていたのですが、このエラーでうまく動きません・・。

確認したところ、無事に解決できましたので、その際のメモを記事にしようと思います。

そんなわけで、今回はAngularのルーティング箇所で「Invalid configuration of route ”: redirectTo and children cannot be used together」が出た場合の対処法についてご紹介しますね。

確認した際の環境は以下となります。

  • Angular CLI: 7.3.8
  • Node: 8.11.1
  • OS: darwin x64
  • Angular: 7.2.0
目次

エラー発生時のコードの紹介

問題のエラーが発生した際のコードをご紹介します。

以下のようなコードでルーティングしようとしていました。

const routes: Routes = [
  { path: '',  redirectTo: '/main', component: HomeComponent,
      children: [
        { path: 'main', component: MainComponent},
      ]
  },
  { path: 'systemError', component: SystemErrorComponent}
];

一番上位で正常ルートとシステムエラーのルートを分岐し、正常ルートだった場合はmainというパスにリダイレクトしようとしています。

ですが、これではどうもうまくいきません。

このまま実行するとInvalid configuration of route '': redirectTo and children cannot be used togetherが出てしまうのです。

原因はchildrenの中に空のルートがなかったから。

それでは、Invalid configuration of route '': redirectTo and children cannot be used togetherの原因について、確認しましょう。

調べてみたところ、どうやらchildrenの中に空のルート(”)がなくて、うまくリダイレクトができていなかったことが原因のようです。

こちらのstackoverflowが参考になりました。
参考:Use redirectTo if you using also children parameter, is this possible?

早速、上記のコードを書き直してみましょう。

const routes: Routes = [
  { path: '', component: HomeComponent,
      children: [
        { path: '', redirectTo: 'main', pathMatch: 'full'},
        { path: 'main', component: MainComponent},
      ]
  },
  { path: 'systemError', component: SystemErrorComponent}
]

2~4行目を修正しています。
最上位でのredirectTo: '/main'を削除し、4行目に以下を追加しました。

{ path: '', redirectTo: 'main', pathMatch: 'full'},

このようにchildrenの中にpath: ''を追加したところ、正常にルーティングされるようになりました。

childrenの同じ階層の中でリダイレクトしなければならなかったのですね。
勉強になりました。

終わりに

今回は、AngularでInvalid configuration of route '': redirectTo and children cannot be used togetherが出た場合の対処法についてご紹介しました。

内容をまとめると以下のようになります。

まとめ
  • childrenで設定したルートにリダイレクトさせる場合は、空の子ルートを用意してからリダイレクトする

分かってみると、本当にちょっとした違いでしたね。
ルーティングの作法をきちんと理解しなければならないな、と改めて思いました。

今回はここまでです。それでは。

シェアしていただけると嬉しいです!
目次