[Bug]: useHref after the 6.19 update returns a different path than in 6.18

[mbohovic]

What version of React Router are you using?

6.20

Steps to Reproduce

for example

url: http://myApp.com

const App = () => {
  ...

  <Routes>
    <Route path="/abc/:id" element={<MyComponent />}
  </Routes>

  ...
}

url: http://myApp.com/abc/2

const MyComponent = () => {

  ...
  <Routes>
    <Route path="/exaxmple" />
    <Route path="/example2" />
  </Routes>
  ...
}

url: http://myApp.com/abc/2/example

const SubComponent = () => {
  const href = useHref('')

 // href value = '/abc/2/example'
}

on href value is '/abc/2/example' but in version 6.18 is value /abc/2

how do I get the value of /abc/2, i.e. parent route in Routes positioned in the App component ?

Expected Behavior

useHref('') returns the value /abc/2

Actual Behavior

useHref('') returns the values /abc/2/example

[brophdawg11]

Could you provide a small codesandbox reproduction of this setup so we can be sure we're looking at the right thing? Do you have a splat route in your app allowing the sub-Routes to be used?

Here's a sandbox you can fork to get started: https://codesandbox.io/p/sandbox/react-router-dom-template-fglmrh

[mbohovic]

here is example codesandbox

but I couldn't display JSON.stringify(href) in the Subpage component because codesandebox somehow doesn't respond to the url change in the example

but please try to edit the url in the example like this from https://xrw6rv.csb.app to https://xrw6rv.csb.app/example/2/subpage

and this url will show useHref('') as /example/2/subpage but on version 6.18 it is /example/2

[brophdawg11]

I'm not sure this is reproducing the issue? If I download that sandbox and run it locally, I see useHref("") returning /example/2/subpage on both 6.18 and 6.20?

Here's a simplified sandbox with a link to the /example/2/subpage urls since codesandbox is weird with displaying the active URL for some reason: https://codesandbox.io/p/sandbox/react-router-dom-forked-mjzkn7?file=%2Fpackage.json. Try changing the package.json versions in there between 6.18 and 6.20 and I don't think the end result changes?

If we can get a reproduction together I think this is likely a dup of #11052, the original issue didn't reflect the splat route so I wasn't sure at first but the codesandbox is using the splat.

[mbohovic]

I can't explain it somehow, in our application version
6.18 and below useHref('') = /example/2 and in version
6.20 useHref('') = /example/2/subpage

I will try to go through our application and find out in more detail why it is done this way.

In any case, based on the given example in codesandbox, is the correct behavior as it is in version 6.20?

thanks

[brophdawg11]

Technically speaking, I believe the behavior in 6.20 is correct (based on the bug fix in #10983) - there's a longer explanation in #11052 (comment).

However, it does seem that a number of folks may have been relying on the buggy behavior so we are planning to take a closer look, so I would stay on 6.18.0 and hold off on making changes to work with the new behavior until we land on a decision there.

The tl;dr; of the issue is that IMO if you are on URL /example/2/subpage, an href to the "current" location (returned by useHref(''), useHref('.')) should be /example/2/subpage - no matter what type of route you are operating within. In 6.18.0 both static (path="/example/2/subpage") and dynamic (path=/example/:id/:page) routes would return the full URL (/example/2/subpage). But splat routes (path="/example/:id/*") would return /example/2.

[brophdawg11]

I'm going to close this out as a dup of #11052 since I'm almost certain that's the underlying cause. Please add any reproduction if you can come up with it and if it turns out to be a different underlying cause we can re-open this 👍