connectHistory()

function connectHistory(router: Routes): () => void;

Connects a router instance to the history API. This allows us to reliably check for active routes, or to listen to path changes.

NOTE

Due to an unresolved issue in the router library, as concurrent/re-entrant calls to goto() are not guarded against: "TODO (justinfagnani): do we need to detect when goto() is called while a previous goto() call is still pending?" So we need to re-sync the router after each navigation, to ensure that the router is always in sync with the actual location.

It is usually called once the routes are registered.

IMPORTANT

Make sure to call the returned cleanup function when the router is no longer needed.

Parameters

router

Routes

Returns

(): void;

Returns

void

Example

class RootComponent extends LitElement {
  readonly #router = new Router(this, [ ... ]);
  readonly #disconnectHistory = connectHistory(this.#router);

  override disconnectedCallback() {
    super.disconnectedCallback();
    this.#disconnectHistory();
  }

  override render() {
    return html`
      <main>${this.#router.outlet()}</main>
    `;
  }

  // ...
}