When navigating through my routes, I encountered an issue with the following routing setup:
const routes: Routes = [
{
path: '',
component : HomeComponent,
children: []
},
{
path: 'login',
children: [
{
path: '',
component: LoginComponent
},
{
path: 'with-email',
component: LoginWithEmailComponent
},
{
path: 'forgot-password',
component: LoginForgotPasswordComponent
}
]
}
];
Everything seemed to be working fine until I visited the "with-email" page and tried to navigate using the following code snippet:
<span><a routerLink="forgot-password"><i class="p1-icon-arrow"></i>Forgot password?</a></span>
Instead of redirecting me back to the login page and then to the forgot-password page, it created a link that looked like this:
/login/with-email/forgot-password
I was expecting it to take me directly to login/forgot-passwprd. Can anyone help me understand why this behavior is happening?