[v6] useSearchParams uses wrong basePath in setSearchParams when used in parent route

[andrelandgraf]

I noticed some unexpected behaviour of useSearchParams.

The issue

I try to manage layouts in higher-order routes and make use of <Outlet /> to reuse the same layout within all sub-routes. I try to use useSearchParams and useParams in the parent route to be context aware, e.g. show a different nav-menu based on which route/URL is actually rendered right now.

// current URL: /auth/login?error=login_failed
// this code is in /auth.ts
const [searchParams, setSearchParams] = useSearchParams();
searchParams.delete('error');
setSearchParams(searchParams, { replace: true} );
// navigates to /auth

setSearchParams navigates away from the current child route back to the parent route if called from the parent route.

Example use cases:

I am using a hook in the parent component to listen for URLSearchParam changes. If ?error=x present, I display an error message to the user across all sub-routes. If the user closes the message, I remove the ?error=x form. The parent route is /auth.tsx. If the user is at /auth/login.tsx and closes an error message, setSearchParams navigates the user to /auth (away from the current route).

You can find a minimal viable example of the issue with useSearchParams here.

Expected behavior:

Since the user is current at /auth/login.tsx, I would expect that setSearchParams does not change the current route regardless from where it was called.

** Workaround: **

Instead of useSearchParams:

useLocation seems to be not affected by the issue. So you can make use:

const location = useLocation()
navigate({ pathname: location.pathname, search: '?' + searchParams.toString() });

[tortilaman]

Workaround:

Instead of useSearchParams:

useLocation seems to be not affected by the issue. So you can make use:

const location = useLocation()
navigate({ pathname: location.pathname, search: '?' + searchParams.toString() });

Thanks, this got me on the right track.

[chaance]

The root of the issue AFAICT is that navigate, when called without an explicit pathname, always routes to the root route from which it is called from. Unsure if this is intended or not, but either way we need to document it and, if this is intended, provide a workaround when calling setSearchParams which abstracts the navigator function.

[chaance]

Fixed in #7982