Hash based routing not reflected in href

[benmerckx]

I set up hash based routing based on the example in the readme: https://github.com/molefrog/wouter#customizing-the-location-hook

On click this navigates <Link href="/route" /> to /#/route. However that change in url is not reflected in the href attribute of the anchor element. So when interacting with the link in any other way (copy url, ctrl click to open new tab, etc) you end with an incorrect url. Changing the link to <Link href="/#/route" /> will navigate it to /#/#/route.

Should I change the setup to strip the hash in navigate and include it in the Link hrefs? Or is there a better way to achieve consistency?

[cbbfcd]

@benmerckx hi~ there's all the magic in Link

export const Link = (props) => {
  const navRef = useNavigate(props);
  const { base } = useRouter();

  let { to, href = to, children, onClick } = props;

  const handleClick = useCallback(
    (event) => {
      // ignores the navigation when clicked using right mouse button or
      // by holding a special modifier key: ctrl, command, win, alt, shift
      if (
        event.ctrlKey ||
        event.metaKey ||
        event.altKey ||
        event.shiftKey ||
        event.button !== 0
      )
        return;

      event.preventDefault();
      navRef.current();
      onClick && onClick(event);
    },
    // navRef is a ref so it never changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [onClick]
  );

  // wraps children in `a` if needed
  const extraProps = {
    // handle nested routers and absolute paths
    href: href[0] === "~" ? href.slice(1) : base + href,
    onClick: handleClick,
    to: null,
  };
  const jsx = isValidElement(children) ? children : h("a", props);

  return cloneElement(jsx, extraProps);
};

In my opinion, a custom Link component may be a good choice to ensure consistent behavior

If there is anything I missed, please let me know

[molefrog]

Hi! It took us almost 3 years, but we finally fixed this. Thank you for participating in this discussion. https://github.com/molefrog/wouter/releases/tag/v3.1.0