Navigating to update Search/Query params causes subscriptions for onBeforeLoad to fire

[geudrik]

Basically, I'm trying to use query params to partially drive the UI. On my page, I have a table that loads on page load. When I click a row, I'm adding the query param thingID=whatever. The page works on load via the useSearch() hook to update and display (in this case) and open slide pane if the param is present.

however, when that param is "navigated" to either via a Link component, or a call to useNavigate, the subscription catches the event and causes my transition animation to fire, resulting in what visually appears to be a full page reload.

Is there a better subscription to use that only fires on actual page changes, or a better way to manipulate search/query params that doesn't trigger a navigation?

I'm using "@tanstack/react-router": "^1.51.2",

[geudrik]

One idea I came up with was to create a hook that checks to see if the path or hash has changed when the subscription fires. If not, don't do the transition animation, but I figured I'd see if there was a better approach to this before I did that.. seems like more work :D

[schiller-manuel]

can you please provide a minimal complete example by forking one of the existing router examples on stackblitz?

[geudrik]

Sure, Ill see if I can get that taken care of tomorrow.

In the mean time, the fix I settled on is a simple conditional check instead of the hook

// in the a component trying to change URL args
const navigate = useNavigate()
const updateFilters = (name: string, value: unknown) => {
    // This navigate() call triggers the onBeforeLoad subscription to fire
    navigate({search: (prev) => ({...prev, [name]: value}), replace: true});
};
updateFilters("urlArg", "valueForIt")


// in __root.tsx

    useEffect(() => {
        const unsubscribe = router.subscribe("onBeforeLoad", (event) => {
            const {fromLocation, toLocation} = event;
            if (fromLocation.pathname !== toLocation.pathname || fromLocation.hash !== toLocation.hash) {
                console.log("Significant navigation event detected")
                setIsAnimating(true);
            }
        });

        return () => unsubscribe();
    }, [router]);

This inside of my __root.tsx route, specifically the conditional for the pathnames and hashes being not equal to denote whether "an actual navigation" event is happening, fixes the issue.