Angular 子路由在直接加载时重定向，在那里导航工作正常

Question

My Angular child route can be navigated to but cannot be refreshed or loaded directly.

const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
        data: { num: 1 }
    },
    {
        path: 'page', component: PageComponent, data: { num: 2 },
        children: [
            { path: ':id', component: PageComponent } 
        ]
    }
];

linking to http://localhost:4300/page/715497 loads the page and I have access to the param 715497 . Then reloading the page redirects back home. Why would this be happening?

Answer 1

In order for this route to be rendered, a <router-outlet> must be available in the RootComponent . router-outlet> is an Angular directive from the router library that is used to insert the component matched by routes to be displayed on the screen. The <router-outlet> isn't linked to the component, it is linked to the child routes of the component

RouterOutlet documentation

A good, understandable example with Angular 11 Routing