Something I'm confused with this routing.

app-routing file

const routes: Routes = [
  {
    path: '',
    redirectTo: 'main',
    pathMatch: 'full'
  },
  {
    path: 'main',
    loadChildren: () =>
      import('./modules/main/main.module').then(m => m.MainModule)
  },
  {
    path: 'auth',
    loadChildren: () =>
      import('./modules/auth/auth.module').then(m => m.AuthModule)
  },
  {
    path: '', component: HomeMenuComponent, children: [
    ],
  }];

file auth-routing

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: '',
    children: [
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'register',
        component: RegisterComponent
      }
    ]
  }
];

But when in the template login-component.html I'm trying to follow the link:

<span  routerLink="register" routerLinkActive="active-link">Зарегистрироваться</span>

it throws me to this address:

auth/login/register

Why is this happening? On the one hand, that's right, I'm at the auth/login level. But on the other hand, when I look at other examples, they somehow turn out at such addresses. That's just I don't understand what I need to add for this.

CodePudding user response：

From https://angular.io/api/router/RouterLink

"If the first segment begins with /, the router looks up the route from the root of the app.

If the first segment begins with ./, or doesn't begin with a slash, the router looks in the children of the current activated route."

You're probably at auth/login when you use the routerLink='register', which as per the above quote, takes you to auth/login/register

Try routerLink="/auth/register"