I am trying to redirect to a new page with the help of the router link attribute. but it is redirecting to the dashboard page instead of an expected page.

Below is how project structure looks

[![enter image description here][1]][1]

Routing-module file

```
children: [
      {
        path: '',
        redirectTo: 'cards',
      },
      {
        path: 'transactions',
        component: TransactionsComponent,
        data: {
          title: 'Transactions',
        },
      },
      {
        path: 'recon',
        component: ReconciliationComponent,
        data: {
          title: 'Reconciliaton',
        },
      },
      {
        path: 'coa',
        component: CoaComponent,
        data: {
          title: 'Chart of Accounts',
        },
      },
      {
        path: 'miscreceipt',
        component: MiscpaymentComponent,
        data: {
          title: 'Misc Receipt',
        },
      }
    ],
  },
  {
    path: 'miscpayment',
    component: MiscpaymentComponent,
    data: {
      title: 'Misc Payment'
    }
  },

```

(Above routes I have tried this way only in order to check whether it should work, otherwise, they were mentioned one below another )

HTML file:

```
    <c-container>
  <c-row>
    <c-col>
      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button cButton color="info" shape="rounded-pill" variant="outline" class="me-md-2" routerLink="/accouting/miscpayment" >New Misc Payment</button>
        <button cButton color="info" shape="rounded-pill" variant="outline" routerLink="/miscreceipt">New Misc Receipt</button>
        <button cButton color="info" shape="rounded-pill" variant="outline">Add Journal Transaction</button>
        <button cButton color="info" shape="rounded-pill" variant="outline">Upload a Bank Statement</button>

         <!--<button (click)="toggleCollapse()" cButton color="info" shape="rounded-pill" variant="outline" cDropdownToggle>More</button>
        <ul cDropdownMenu>
          <li><a [routerLink] cDropdownItem>Add Journal Transaction</a></li>
          <li><a [routerLink] cDropdownItem>Upload a Bank Statement</a></li>
        </ul>-->
      </div>

    </c-col>
  </c-row>
</c-container>

```

I have also tried other ways of redirecting

```
<button cButton color="info" shape="rounded-pill" variant="outline" class="me-md-2" (click) = "onClick()" >New Misc Payment</button>

```

In Component file method onClick()

```
    import {Router} from '@angular/router';
@Component({
  selector: 'app-transactions',
  templateUrl: './transactions.component.html',
  styleUrls: ['./transactions.component.scss']
})
export class TransactionsComponent  {

  constructor(private route:Router) { }

  ngOnInit(): void {
  }

  onClick(){
        this.route.navigate(['/miscpayment']); // navigate to other page
    }

}

```

After trying both solutions,
I am unable to redirect it. It's still redirecting to the dashbaord