React Router and history state

[zackriegman]

I'm very confused about how to manage history state with React Router.

I have a web app where users explore trees of data. They start with a root node in a ReactFlow component and progressively open child nodes.

I would like to be able to provide bookmark links like:

web.app/bookmark/akeoOi2

That was easy enough with React Router using dynamic segments. However, after the bookmark loads up I would like to reset the URL to just "web.app" without creating a new navigation. After a user opens up a bookmark they will continue by opening up nodes in the tree, meaning the bookmark will no longer refer to what they have in their window. For that reason I want to replace the URL to avoid confusing the user. The only way I could figure out how to do that without triggering a further navigation was:

window.history.pushState(null, "", "/");

Question 1: Is that the right way to update the URL after loading a bookmark without triggering a navigation?

Then as the user opens more nodes in the ReactFlow component, I would like to save the expanded nodes to the history state. That way if the user navigates away from the ReactFlow component, and then hits the back button to return to the ReactFlow component, I can reconstruct their view. It seems like the way to save history state with React Router is to get a "Location" with useLocation(), and then set the state on that. But that doesn't seem to work.

Question 2: How do I update the browser history state without causing a navigation in React Router?

Any pointers would be greater appreciated!

Thanks,
Zac

[machour]

Any reason why you don't want to leverage the URL to persist the state?
What if the URL got updated anytime the user opened a leaf? Wouldn't that be better, and automatically handle history for you?

[zackriegman]

On Tue, Jan 17, 2023 at 9:21 AM Mehdi Achour ***@***.***> wrote: Any reason why you don't want to leverage the URL to persist the state? What if the URL got updated anytime the user opened a leaf? Wouldn't that be better, and automatically handle history for you?

Thanks for the suggestion. The problem with that is that there could potentially be hundreds (or even thousands) of expanded nodes. It seems like it would be counterproductive to have a url with hundreds or thousands of node IDs in it. I think of the URL as a place to expose a link to the user, but if the link is a page long that doesn't seem helpful to the user. I don't know if there is an official maximum length to a URL, but I think it's generally considered good practice to keep it under a few thousand characters, no? So, it seems like browser state history is the right place to keep track of which nodes are expanded, not the URL. Do you know the right way to do this in v6?

…

— Reply to this email directly, view it on GitHub <#9902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC7PDZWMFREV2M5IZAAJBDWS2TE3ANCNFSM6AAAAAAT23SQ4I> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[zackriegman]

So, I'm getting the sense that React Router isn't built for this... which seems surprising because it seems like very basic functionality...

[machour]

@zackriegman you could get more support by joining our discord server