Angular 5 - Routing to the same component with different URL's

Question

I have the following routes which should route to the same component, I can get it to work by using this following structure.

const carModuleRoutes: Routes = [
    { path: 'car/:category/:carId', component: CarDetailComponent},
    { path: 'car/:carId', component: CarDetailComponent},
];

But I know this is not a standard way to do so, Is there a proper way of doing the same functionality ?

Answer 1

That is the standard way of defining routes and their respective components. You are inside routing module and you are trying to define routes, and not the components.

So, do not overlook to group the same component and define routes for them. What you have done seems appropriate.

EDIT :

Your case is very simple, you can simply do :

const carModuleRoutes: Routes = [
    { path: 'car/:category/:carId', redirectTo : 'car/:carId', pathMatch : 'full'},
    { path: 'car/:carId', component: CarDetailComponent},
];

Note :

In this case, your url will change and you might loose the value of :category, which might have been useful in the component. So it is best to specify multiple routes pointing to same component as a seperate case.

Answer 2

its ok to use also you can use redirect and child routing for same component. You have done it right way .

Refrence:https://angular-2-training-book.rangle.io/handout/routing/routeparams.html

Child Routing REF : https://angular.io/guide/router#child-routing-component