Route နဲ့ပတ်သက်လို့ ထပ်ပြီးတော့ သိထားရမဲ့ feature တစ်ချို့ကို လေ့လာရပါမယ်။
Redirecting
Route တွေသတ်မှတ်ရာမှာ ဘယ် path ကိုသွားရင် ဘယ် component ကို render လုပ်ပေးရမလဲဆိုတာ ပြောရပါတယ်။ ဒီလိုမျိုး အမြဲပြောစရာမလိုပါဘူး path မတူပဲ ပြပေးရမဲ့ component တူရင် အခုလို redirect လုပ်လို့ရပါတယ်။
AppModule
မှာ route တစ်ခု အခုလိုထပ်ထည့်ပါ။
const appRoutes: Routes = [
...
{
path: 'something',
redirectTo: '/servers',
},
];
localhost:4200/something
ဆိုရင် /servers
ကို redirect လုပ်ပေးဖို့ ပြောထားပါတယ်။ ဒီနည်းနဲ့ redirect လုပ်လို့ရမှာ ဖြစ်ပါတယ်။
Redirect မှာ သတိထားရမဲ့ ကိစ္စတစ်ခုရှိပါတယ် လက်တွေ့သိနိုင်ဖို့ AppModule
ရဲ့ path: ‘’
ကိုအခုလို ပြင်လိုက်ပါ။
const appRoutes: Routes = [
{
path: '',
redirectTo: '/users',
},
...
];
အရင်က HomeComponent
ကိုပြပေးသော်လည်း အခု /users
ကို redirect လုပ်ဖို့ပြောင်းလိုက်တာပါ။ ပြောင်းပြီးရင် browser မှာ error တက်နေတာကို တွေ့ရမှာပါ။
ဘာဖြစ်လို့လဲဆိုတော့ Angular က route တွေကို ရှာဖွေရာမှာ prefix ကိုကြည့်ပြီး ရှာပေးတာပါ။ ဒါကြောင့် path: ‘’
ဆိုတာ route အားလုံးရဲ့ ထိပ်ဆုံးမှာ ပါနေတာဖြစ်လို့ ဘယ် route ခေါ်ခေါ် /users
ကိုပဲ redirect လုပ်ပေးတော့မှာပါ။ အဲ့ဒါကြောင့် Angular က ဘယ်လိုရေးသင့်ကြောင်း error message နဲ့ပြပေးနေတာ ဖြစ်ပါတယ်။
ခုနကရေးခဲ့တဲ့ route ကို အခုလို ပြင်လိုက်ပါ။
const appRoutes: Routes = [
{
path: '',
redirectTo: '/users',
pathMatch: 'full',
},
...
];
pathMath
ရဲ့ default က prefix
ဖြစ်တာမလို့ full
လို့ပြောင်းလိုက်တာပါ။ ဒါဆိုရင် path prefix ကိုပဲ မကြည့်တော့ပဲ path တစ်ခုလုံးကို တိုက်စစ်ပြီး တူမှ redirect လုပ်ပေးတော့မှာဖြစ်ပါတယ်။
Wildcard
URL မှာကိုယ်မသတ်မှတ်ထားတဲ့ route တစ်ခုခုကိုခေါ်မိရင် error တက်တာကိုသတိထားမိမှာပါ။ ဒီလိုမဖြစ်အောင် မသတ်မှတ်ထားတဲ့ route ကိုခေါ်ရင် Page Not Found စတဲ့ 404 page တစ်ခုကို ခေါ်ပေးလိုက်လို့ ရပါတယ်။
စမ်းသပ်ဖို့အတွက် PageNotFound
component တစ်ခု အရင်တည်ဆောက်ပါ။
PageNotFoundComponent
template မှာ အခုလိုရေးပါ။
<h3>Page Not Found</h3>
AppModule
routes တွေရဲ့ အောက်ဆုံး မှာ အခုလိုထည့်ပါ။
appRoutes: Routes = [
...
{
path: '**',
component: PageNotFoundComponent,
},
];
**
ဆိုတာ wildcard သင်္ကေတပါ။ မသတ်မှတ်ထားတဲ့ route မှန်သမျှ PageNotFoundComponent
ကိုပြပေးမှာပါ။
စမ်းကြည့်ရင် အခုလို တွေ့ရမှာပါ။
သတိထားရန်
wildcard ကို route အားလုံးရဲ့ အောက်ဆုံးမှာပဲ သတ်မှတ်ပေးပါ။ Angular က route တွေကို top to bottom ရှာတဲ့အတွက်ကြောင့် wildcard ကို အပေါ်မှာထားရင် ဘယ် route ခေါ်ခေါ် Page Not Found ပဲပြနေမှာ ဖြစ်ပါတယ်။
Outsourcing Routes Configuration
AppModule
မှာ route တွေများလားတဲ့အခါ စီမံရတာ အဆင်မပြေပါဘူး။ ဒါကြောင့် တခြား file တစ်ခုနဲ့ ခွဲထုတ်ပါမယ်။
app-routing.module.ts
ဆိုတဲ့ file ကို src/app
အောက်မှာဆောက်ပါ။
File ဖွင့်ပြီး အခုလိုရေးလိုက်ပါ။ appRoutes
တွေကို AppModule
ကနေ cut လုပ်ပြီးကူးထည့်ပါ။
const appRoutes: Routes = [
...
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
AppModule
မှာလိုပဲ RouterModule
ကို import လုပ်ပေးဖို့ လိုပါတယ်။ ပြီးတော့ forRoot()
နဲ့ route တွေ setup လုပ်ပါတယ်။
exports
ထဲမှာ ဘယ်ဟာတွေကို export လုပ်မလဲဆိုတာ သတ်မှတ်ပေးရတာပါ။ ဒီမှာတော့ RouterModule
ကို ထည့်ထားပါတယ်။ ဒီလိုလုပ်ထားတာကြောင့် AppModule
က import လုပ်တဲ့အခါ route တွေကို ရရှိစေမှာ ဖြစ်ပါတယ်။
ပြီးရင်တော့ AppModule
မှာအခုလို ပြုပြင်လိုက်ပါ။
@NgModule({
declarations: [
...
],
imports: [BrowserModule, FormsModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
အခုဆိုရင် AppModule
ကရှင်းရှင်းလင်းလင်း ဖြစ်သွားတာ တွေ့ရမှာပါ။ ဒါ့အပြင် app ကလည်း အရင်လို ဆက်အလုပ်လုပ်နေမှာ ဖြစ်ပါတယ်။
Previous: Nested Routes
Next: Route Guards