Race conditions while using react-router-6 adapter

[Samantha Hughes]

I've been noticing race conditions with the react-router-6 adapter that don't seem to occur when just using the window adapter.

Specifically this seems to happen in situations where a navigate occurs below a component that is setting a query param.

const someComponent = () => {
    const [useQueryParam, setUseQueryParam] = useQueryParam(false);
    useEffect(() => {
        setUseQueryParam(true,"replaceIn");
    }
    return (
        <Navigate to= "/someRoute" replace  />
    )
}

This results in the url just having the query param, and not navigating to /someRoute. It works fine if you don't use replace. I have experimental batching turned on.

[Samantha Hughes]

Worth noting they don't seem to happen if i use the window history adapter, but i'm also not sure what the consequences of doing that are if i'm using react routing?

[Samantha Hughes]

My use case is persisting some global internal state to the url so users can easily share their views. As they navigate around the url is wiped, i'm using effects to restore the internal state to the url.

[Samantha Hughes]

This seems to have gone away when I switched to using createBrowserRouter vs the older <BrowserRouter style.

[AntoineDuComptoirDesPharmacies]

Hi @shughes-uk ,

We have the same problem on our side. I am wondering if the PR of @afn here may help about our problem : #266

On our side we will have hard time switching from BrowserRouter to createBrowserRouter because all our routes are defined using DOM element Route.

If someone have any tips, will be glad to hear.

Note : To reproduce the problem better, you can debounce the call to setQuery so you will have :

• Call to debouncedSetQuery
• Click on a <Link> triggering navigate
• setQuery execution occurs
• The router navigate to the new Link then go back to the original page with query set in URL

Yours faithfully,
LCDP