[Bug]: setSearchParams() from useSearchParams() can add trailing slash to pathname in some circumstances

[Monstrel]

What version of React Router are you using?

6.0.2

Steps to Reproduce

With a BrowserRouter configured with a basename of /foo/bar and the browser pointed at site.com/foo/bar, use the setSearchParams function returned by the useSearchParams() hook to set search parameters such as:

setSearchParams({ name: 'Bob' })

Expected Behavior

The browser URL should update to site.com/foo/bar?name=Bob

Actual Behavior

The browser URL updates to site.com/foo/bar/?name=Bob

Note the trailing slash at the end of the path.

[senseibarni]

Just encountered the same behavior with version 6.2.1.

After short digging, I've found the cause in NavigateFunction which is returned by useNavigate hook:
if (basename !== "/") { path.pathname = joinPaths([basename, path.pathname]); }
and "extra" slash can be found in the joinPaths function:
const joinPaths = (paths: string[]): string => paths.join("/").replace(/\/\/+/g, "/");

[senseibarni]

Created CodeSandbox for this: https://codesandbox.io/s/react-router-issue-8312-63qqc7
I think I will try to contribute to this one.

[brophdawg11]

This should be fixed by #8861 - this should be included in the next 6.4.0 prerelease (hopefully this week)