Broken relative links when using <Routes>

[jasikpark]

My <Link to= and <Navigate to= don't seem to take into account the current path relative to the current route.

I have a custom component called TabLink that seems to generate the correct path via useHref, but not w/in the useLinkClickHandler(to) hook:

import { Tab, type TabProps } from 'ariakit/tab';
import cn from 'classnames';
import { useLayoutEffect, useRef } from 'react';
import { useHref, useLinkClickHandler } from 'react-router-dom';
import { useRect } from '@hooks/useRect';
import { useAnimatedTabs } from './context/useAnimatedTabs';
import TabStyles from './TabLink.module.css';

type TabLinkProps = TabProps<'a'> & {
  to: string;
};

export function TabLink({ to, ...props }: TabLinkProps) {
  const href = useHref(to);
  const onClick = useLinkClickHandler(to);

  // get the state and style changing function from context
  const { state, setActiveRect } = useAnimatedTabs();

  // measure the size of our element, only listen to rect if active
  const ref = useRef<HTMLAnchorElement>(null);

  const isSelected = !!state.selectedId && ref.current?.href.includes(state.selectedId);

  const rect = useRect(ref, { observe: isSelected });

  // callback to set styles whenever we're active
  useLayoutEffect(() => {
    if (isSelected) {
      setActiveRect(rect);
    }
  }, [isSelected, rect, setActiveRect]);

  return (
    <Tab
      ref={ref}
      as="a"
      href={href}
      onClick={onClick}
      className={cn(TabStyles.TabLink, { [TabStyles.TabLink___isActive]: isSelected })}
      {...props}
    />
  );
}

I would expect <TabLink to="log/" > when in the context of a route matching /hosts/:hostId to route to /hosts/:hostId/log rather than to /log

[jasikpark]

cc @brophdawg11 since you've been helpful sorting out Routes bugs recently

I can provide a complete reproduction if necessary, just wanted to post an initial discussion

[brophdawg11]

Yeah a simplified reproduction would be great - removing as much of your own app code and just demonstrating the issue with RR primitives. Thanks!

[jasikpark]

Here's my reproduction: https://stackblitz.com/edit/react-ts-7xqchk?file=HostsRoot.tsx

I guess I have two bugs, one that the Link should either crash or warn if I pass a non-string to it or it should call the toString method of it

The other is that when I construct the to with a string, the href gets built correctly, but not the click handler. <Link to={4}> in the context of /hosts/ in a Routes builds a /hosts/4 url, but navigates to /4

[brophdawg11]

What version did you encounter this in? I think you're running into #10430 which is fixed and will be available soon in a 6.11.1 release.

Passing a number to <Link> navigates forward or backward in the history stack, it's a passthrough to window.history.go, so that's not valid if you're trying to navigate to /hosts/{id} and you will need to use a string.

[brophdawg11]

Oops, sorry Link doesn't accept a number - you will get a TS error. It's useNavigate that allows you to pass a number. You can't do it via a link since we can't determine the href of other history stack entries.

[brophdawg11]

Looks like your example works as expected using strings and 6.11.1-pre.0: https://stackblitz.com/edit/react-ts-dknpd3?file=App.tsx

[jasikpark]

sweet, #10430 is the bug I was trying to fix - glad that's good. Wish there was more obvious "link was passed not a string" errors if you pass a number to it though... though ig w/ #10367 it's intentional to just have a weird value and no error if you pass something wrong..