fix: compare path components to detect active link in router

[flo-at]

With this chage, the two path fragments are compared by their components, not just as strings.
This should fix #1655.
I'm note sure if this covers each and every corner case though.

[gbj]

Tested it out with different scenarios and this looks good to me.

For comparison, here's Solid Router, which is what Leptos Router is ported from. Looks like they've switched from exact to end but would have the same issue

  const isActive = createMemo(() => {
    const to_ = to();
    if (to_ === undefined) return false;
    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
    const loc = normalizePath(location.pathname).toLowerCase();
    return props.end ? path === loc : loc.startsWith(path);
  });

(source)

Here's React Router, similar in many ways. Here they get around it by checking if the last character is / (so, for example, /foo and /foo_bar don't match)

    let isActive =
      locationPathname === toPathname ||
      (!end &&
        locationPathname.startsWith(toPathname) &&
        locationPathname.charAt(toPathname.length) === "/");

(source)

The iterator-based solution is nicer, I think, than either of these. I couldn't find any edge cases, but I'm sure we'll get some nice bug reports whenever they appear 😄

Thanks very much.

[flo-at]

Thanks for the quick response and merge!

Here's React Router, similar in many ways. Here they get around it by checking if the last character is /

That was my first thought, too. But then I came up with the example I put into the issue which still wouldn't work.

Keep up the great work! I'm finally not hating front-end development anymore thanks to leptos 😄.