Skip to content

[BUG] - useLink overwrites router-ized prop #4624

@jprosevear

Description

@jprosevear

HeroUI Version

2.6.13

Describe the bug

This is my current theory as to why my links in RR with useHref are not working:

  1. useLink calls useAriaLink()
  2. useAriaLink calls useLinkProps from react-aria
  3. useLinkProps will use useHref to change the href prop and send it back to useAriaLink
  4. useAriaLink passes back to useLink
  5. useLink does a mergeProps with the original props ('otherProps') after linkProps
    ...mergeProps(focusProps, linkProps, otherProps),
    - overwriting the useHref'ed href

This can be seen as the relative link is "bare" (ie does not have the rest of the route path that a plain useHref locally would show)

ie const href = useHref("blogs") would return '1/blogs' in my case, but stays as "blogs" in the element href

This breaks all relative link navigations for me.

Your Example Website or App

https://stackblitz.com/edit/wfdcu9f2

Steps to Reproduce the Bug or Issue

React Router setup with HeroUIProvider (navigation and href); try relative links. I have a complex setup I can demonstrate on a screenshare if necessary.

Expected behavior

Relative links work

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions