Angular Route Redirect(Yönlendirme) ve Wildcard(*)

Uygulamamızda route’ ları tanımladık ve hepsi çalışıyor. Lakin route yapımız değişirse ne olacak ? Google vb. yerlerde indekslenmiş eski url’ ler den gelen kullanıcılar ne olacak ? Yada yanlışlıkla hiç varolmamış bir url’ e gidilmek istenirse ne olacak ? Eğer ki redirect(yönlendirme) yapmadıysanız, console’ da hatalar fırlatılacaktır ve haliyle uygulamanızda çalışmayacaktır. İşte bu durumu el e almanın yöntemi redirect’ i inceleyelim;

Redirect (redirectTo)

• Öncelikle yönlendirme yaptığımda bizi karşılayacak olan sayfanın component’ ini oluşturuyorum;

ng g c pageNotFound

• Oluşturduğum pageNotFound component için var olan route’ ların yanına yeni bir route tanımlıyorum;

  const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'not-found', component: PageNotFoundComponent}
  ];

• Öncelikle klasik bir redirect route örneği yapalım;

{path: 'herhangiBirUrl', redirectTo: '/not-found'}

• Siteadresi/herhangiBirUrl yazınca, not-found url’ ine yönlendirileceğiz. bir url’ i başka bir url’ e redirect etmeyi öğrendik. Route tanımlamasının "redirectTo" özelliğine istediğimiz path’ i yazarak yönlendiriyoruz.

• Uygulamamızda var OLMAYAN tüm route’ ları ele alabilecek route pattern’ i " ** " dir. Yani ard arda yazılmış iki adet wildcard işareti. Route’ u tanımlayalım;

{path: '**', redirectTo: '/not-found'}

• Artık uygulamamızda tanımlı herhangi bir url ile gelindiğinde algılanıp "not-found" url’ ine yönlendirilecek.

CANLI ÖRNEK;