Angular 路由：每当我刷新页面或手动键入特定的 URL 时，Angular 都会重定向回父路由

Question

I have a CRM module where I defined my own CRM Routing Module as follows:

const routes: Routes = [
  {
    path: 'crm',
    component: CrmComponent,
    children: [
      { path: '', redirectTo: 'companies', pathMatch: 'full' },
      { path: 'companies', component: CompanyListComponent },
      { path: 'contacts', component: ContactListComponent },
      {
        path: 'companies/new',
        component: CompanyEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'contacts/new',
        component: ContactEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'companies/edit/:id',
        component: CompanyEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'contacts/edit/:id',
        component: ContactEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
      {
        path: 'companies/view/:id',
        component: CompanyComponent,
        children: [
          // { path: '', redirectTo: 'details', pathMatch: 'full' },
          { path: '', component: CompanyEditComponent },
          { path: 'documents', component: CompanyDocumentsComponent },
          {
            path: 'related-contacts',
            component: CompanyRelatedContactsComponent,
          },
        ],
      },
      {
        path: 'contacts/view/:id',
        component: ContactComponent,
        children: [
          { path: '', component: ContactEditComponent },
          {
            path: 'related-products',
            component: ContactRelatedProductsComponent,
          },
          {
            path: 'related-raw-materials',
            component: ContactRelatedRawMaterialsComponent,
          },
        ],
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class CRMRoutingModule {}

So whenever I try to manually write URL to view details of a particular company or a contact /crm/companies/view/123?viewDetails=true It redirects me back to /crm.

Same happens whenever I am on a child route and try to refresh it redirects me back to the /crm.

I tried changing the order of routes, however, it did not help. Thank you in advance!

Edit: Perhaps I did not structure my post correctly and left it to be a little insufficient, I have placed in all of those components and they load. However, If I try to manually type an address to a certain company or a contact it redirects me back to the CrmComponent (in this case root), same happens whenever I am in a child component and I reload the page, it just redirects me back and I do not know why

Edit: I have solved the problem, for anyone who might encounter it in the future, check that your tags that have either click listener or router link, do not have it both at the same time, even if the user does not click, for some reason the routing breaks between pages.

Answer 1

Hi in each children component you need to add --

<router-outlet></router-outlet>

It means you need to add in CrmComponent, CompanyComponent, ContactComponent. if you don't add angular doesn't understand where to add child components. So, it always load till the first paths component which is CrmComponent.

I have created one example see and let me know if its helpful https://stackblitz.com/edit/angular-ivy-gr5qgx?file=src%2Fapp%2Fcompany%2Fcompany.component.html

Answer 2

I have solved the problem, for anyone who might encounter it in the future, check that your tags that have either click listener or router link, do not have it both at the same time, even if the user does not click, for some reason the routing breaks between pages.