先日、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
で設定したルートにリダイレクトさせる場合は、空の子ルートを用意してからリダイレクトする
分かってみると、本当にちょっとした違いでしたね。
ルーティングの作法をきちんと理解しなければならないな、と改めて思いました。
今回はここまでです。それでは。