How to pass an object as data throw angular router navigation

I have a route like that that get an id from an object and get the route:

this.router.navigate(["/menu/extra-hour/extra-hours/observations/", id])

These work well but I want pass apart the complete object of data in the screen i will render calling the route how can i do that?

What that question a expecte get a solution to pass data appart from the id that i use to navigate to new route

Passing data objects through routes is not a good practice. My suggestion is pass such data through the common service or BehaviorSubject(rxjs).

btw if you want to some how pass the data through routes here is the way

In current component you have to set the data to route like bellows

import { Component } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Component({
  selector: 'app-form1',
  templateUrl: './form1.component.html',
  styleUrls: ['./form1.component.css']
})
export class Form1Component {
  
  constructor(private router: Router) {

  }

  handleButtonClick() {
    const myObject = { name: 'John', age: 30 };

    const navigationExtras: NavigationExtras = {
      state: {
        data: myObject
      }
    };

    this.router.navigate(['/list'], navigationExtras);
  }
}

Then you have to access the data inside the target component ngOnInit

ngOnInit() {
    const currentState = this.router.lastSuccessfulNavigation;
    console.log(currentState?.extras)

  }