I am creating a custom router where i want to match the pathname to a specific web component.

public Router = new Router([
    new Route('/dev/', 'my-element'),
    new Route('/dev/other', 'other-view')
  ], "#application_page");

There could be other page names like /dev/page/1 so I need to ensure that it as solid as possible

My first approach is way too basic:

const pathname = window.location.pathname;
console.log(pathname);
for (let i = 0; i < this.routes.length; i++) {
  if (pathname.indexOf(this.routes[i].url) >= 0) {
    console.log(this.routes[i].url);

    const el = renderRoot.querySelector(this.containerId);
    if (el != null) {
      el.appendChild(this.routes[i].component);
      return;
    }
  }
}

What is the best way to find the correct route?