I currently have two separate modules with their own unique routing setups:
CarsModule
PassengersModule (Lazy Loaded)
Passenger is essentially a child of car and can be accessed through the following URL structure:
https://localhost/cars/12/passengers/1
Both CarsModule and PassengersModule have their routes clearly defined as shown below:
const routesCars: Routes = [
{
path: "cars/:id",
canActivate: [AuthGuard],
component: CarsContainerComponent,
children: [
{
path: "",
redirectTo: "dashboard",
pathMatch: "full",
},
{
path: "dashboard",
component: CarsDashboardPageComponent,
},
{
path: "passengers",
loadChildren: () =>
import("./passengers/passengers.module").then(
(m) => m.PassengersModule
),
},
],
},
];
const routesPassenger: Routes = [
{
path: "",
redirectTo: ?????
},
{
path: ":pid",
component: PassengerDashboardContainerComponent,
children: [
{
path: "",
component: PassengerDashboardContainerComponent,
},
],
},
];
In cases where a user navigates to a passenger without specifying pid in the URL:
http://localhost/cars/12/passengers
I aim to automatically redirect that URL back to the parent Car URL:
http://localhost/cars/12
I initially attempted handling this scenario within an empty component loaded on the path: "", but it felt cumbersome. What would be the most efficient approach to achieve this?