States in url
Hey,
I have a page with 3 "tabs", when you change tab it just slides a part of the content to show the corresponding tab. Now I would like to save several states of the page into URL to allow navigating to this specific tab. For the moment it work for the base value of those states, but I would like to update the URL to match the state changes.
I'm thinking of implementing it using the router and outlets, but i'm not sure if I can re-create the same behavior. Like I can scroll horizontally with a finger to move from tabs to tabs. I don't visualize how could I do this with an outlet.
Otherwise, is it okay to update the URL without actually changing any router page or smthing ?
In the past I used an external library that added some hooks to make react states auto persisted in the url. Could it work with react-router or can it lead to unexpected behaviors ?
Thanks
4 Replies
quickest-silver•4w ago
Otherwise, is it okay to update the URL without actually changing any router page or smthing ?absolutely just call
navigate(to:'.', search: {...})relaxed-coralOP•3w ago
Okay yep it does works. But I would like to make it act like a state that doest trigger re-render of the full page. I have a chart that animate data changes, and the animation just restart when using navigate
Is there a way to update the url without triggering a reload but just updates some variables ?
I think I could do it by manipulating the url without tanstack, but I don't know if it can breaks something on the router itself to do so ?
quickest-silver•3w ago
does the chart consume the search param?
relaxed-coralOP•2w ago
Not directly, I have some queries that consume the params (using tanstack query), and the chart consume query data
Okay I think I understand what is happening. I added a simple check to print the chart only when data contains something. I guess that during the load of a uncached query, the data object become empty/undefined for a second, which make the chart re-draw. I might need to add a state between my chart and my app to avoid this