[Bug]: window.location.search is stale value and not synchronized with useLocation().search

[mrdulin]

What version of React Router are you using?

6.9.0

Steps to Reproduce

React version	use loader	issue happen
16.14.0	Y	Y
16.14.0	N	N
18.2.0	Y	N
18.2.0	N	N

React 16.14.0 reproducible example:
codesandbox

React 18.2.0 working example:
stackblitz

Expected Behavior

The value of window.location.search should be synchronized with useLocation().search, that is ?status=2.

Actual Behavior

Using the navigate() to replace the url search parameter.

console.log("useLocation().search: ", location.search);
console.log("window.location.search: ", window.location.search);

When the route is /list?status=1, output:

useLocation().search:  ?status=1 
window.location.search:  ?status=1 
useLocation().search:  ?status=1 
window.location.search:  ?status=1

After calling navigate('/list?status=2'), output:

useLocation().search:  ?status=1 
window.location.search:  ?status=1 
useLocation().search:  ?status=1 
window.location.search:  ?status=1 
useLocation().search:  ?status=2 
window.location.search:  ?status=1 
useLocation().search:  ?status=2 
window.location.search:  ?status=1

As you can see, the value of window.location.search is always stale value:?status=1

[timdorr]

This isn't a bug with the library. If React is flushing things to the DOM too quickly, that seems to be an issue on their end. Nonetheless, you are using an older version of React so bugs should be expected.

[gaearon]

If I understand correctly, the substance of the complaint is

the value of window.location.search is always stale value:?status=1

In other words, after calling navigate('/list?status=2') the ?status in the URL bar (as given by window.location) is still 1. This seems to imply that it's the URL navigation that has not been flushed. I assume it's controlled by the router (unless React is forgetting to call some Effect?). I don't see how React flushing to the DOM is relevant here yet.

[matijs]

@mrdulin have you looked into getting the value of status using React Router's useSearchParams?

Stackblitz example