I am currently working with the AppRouting module and have the following code:
...
const routes: Routes = [
...
{
path: 'events',
data: { preload: true },
loadChildren: './events/events.module#EventsModule'
},
...
{
path: '**',
component: PageNotFoundComponent
}
];
...
This configuration loads the Events module, which then loads the EventsRouting module:
...
const routes: Routes = [
...
{
path: ':id',
component: EventsComponent,
},
{
path: '',
component: EventsListComponent
}
...
];
...
Within the constructor of EventsComponent, I make an http.get call to the backend of the website:
constructor(...) {
route.paramMap.subscribe(params => {
let eventId = params.get("id");
http.get<EventDTObject>(baseUrl + "api/v1/Events/Get/" + eventId).subscribe(result => {
if (result==null) router.navigate(['/404']);
this.eventDTObject = result;
}, error => console.error(error));
});
}
Most aspects of this setup function as intended, except for one issue with the line
if (result==null) router.navigate(['/404']);
Upon encountering a null result, the user is redirected to the PageNotFoundComponent. However, this redirection prevents users from utilizing the browser's back button effectively. Each attempt to navigate back leads to another 404 error due to the repeated http.get request.
I am contemplating a solution where instead of redirecting to "/404", it would be possible to display the fallback route "**" in the root routing module using TypeScript. This approach mirrors how accessing an unspecified route in the AppRouting module directs users to the component linked with the fallback route "**".
An ideal scenario might involve a structure like:
http.get<...>(...).subscribe(result => {
if (result==null) router.showDefaultRoute();
...
}
Is this concept feasible?
(please consider the nested routing situation)