[Bug]: useSearchParams hook removes path name from url

[uditjaitly]

What version of React Router are you using?

6.4.0-pre.8

Steps to Reproduce

Sandbox demonstrating the unexpected behavior could be found below

https://codesandbox.io/s/boring-banach-ri3tiv?file=/src/App.js

The behavior is erratic only if I have a basename="assets" as a BrowserRouter Prop. If I remove the basename prop, normal functionality is restored

Expected Behavior

When I do setSearchParams( {foo:'bar'} ) when on url path basename/id1, the url should get changed to basename/id1?foo=bar

Actual Behavior

When I do setSearchParams( {foo:'bar'} ) when on url path basename/id1, the url is changed to basename?foo=bar

For eg, in the sandbox:
https://codesandbox.io/s/boring-banach-ri3tiv?file=/src/App.js

Sandbox Steps:

• When on url /assets Click on the button 'Click me!'
• That should take you to /assets/id1, now click on the button 'Button One'

Notice how the url changes to assets?buttonone=test and not assets/id1?buttonone=test

[brophdawg11]

Thanks for the reproduction! Looks like this busted with #8861 - digging in now 👍

[brophdawg11]

Fixed in #9048 - should have a 6.4.0-pre.9 release out soon

[jrmyio]

Still have this issue in 6.4.0-pre.9 for a *-segment after navigate() was used to update the *-segment.
Then calling setSearchParams removes the star segment.

[brophdawg11]

@jrmyio would you be able to provide a simple code sandbox reproduction to demonstrate the issue?

[jrmyio]

Just tried to replicate it in a codesandbox but couldn't reproduce. Tomorrow I will try to see what makes my project's context break it.

Edit: Found the reason for my issue but it is not a bug in react-router. In the code I assumed setSearchParams is a stable function, but it is actually not. I guess this is somewhat related to #7634.