<!-- wrapper-layout.component.html -->

 <div class="container">
    <div class="row">
        <div>
            <left-side></left-side>
        </div>
        <div>
            <router-outlet 
                name="showright"
            ></router-outlet>
        </div>
    </div>
</div>

/** routing.module.ts */

{
    path: 'connect',
    component: WrapperLayoutComponent,
    children: [
       { 
           path: '', 
           component: RightSideComponent,
           outlet: 'showright'
       },
    ]
 },

// component navigation action

this.router.navigate([
    '/connect', 
    { outlets: { showright: ['user-info'] } }
]);

Here are two common scenarios where this technique is particularly useful:

- Redirecting to a 404 Page for Unknown Resources: When attempting to access an unknown resource, it’s typical to redirect to a 404 page. The expected behavior here is akin to skipLocationChange, where users can see the URL of the unknown resource, allowing them to identify and correct any typos. However, with the UrlTree technique, the URL displayed after the redirect shows /404.

- Performing a 301 Redirect to a Resource’s Canonical URL: In cases where a resource’s URL can be renamed or aliased, performing a 301 redirect to its canonical URL is beneficial. Ideally, this should behave like replaceUrl, where users see the canonical URL without the option to navigate back to the obsolete or aliased URL. Yet, with the UrlTree technique, users can still navigate back to the obsolete or aliased URL.