Routing Deep Dive

Photo by Ron Whitaker on Unsplash

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 တက်နေတာကို တွေ့ရမှာပါ။

Important issue about redirecting

ဘာဖြစ်လို့လဲဆိုတော့ 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 ကိုပြပေးမှာပါ။

စမ်းကြည့်ရင် အခုလို တွေ့ရမှာပါ။

displaying 404 page

သတိထားရန်

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 အောက်မှာဆောက်ပါ။

app-routing.module.ts

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