1 year ago

#254029

test-img

interfect

Can React do two-way binding with a URL field?

I have a data visualization tool written with React. I want to make sure that the URL for the page always refers to the view that the user is currently looking at, and that when they e.g. pan and zoom, or change display settings, the URL is updated so that it will take them back to the same view if they visit it in the future.

(Google Maps works like this; as you pan and zoom the coordinates in the URL get updated to point to where you are currently looking.)

React has tools like React Router to access URL path components and query parameters, but they seem mostly to be designed around a normal multi-route single-page application. You might <Link> to a different route, but you aren't meant to end up at a different route every time you change a dropdown, or type a character in a textbox, or drag to pan something. If you did, the number of history entries created would be unmanageable.

Is there anything in React that can be used to two-way bind page state fields and fields in the URL, so that React will keep them in sync for me? I want to be able to, in the middle of interacting with my application, copy-paste the URL into a new browser window, and have at least the most important parts of my application state be restored, even when that state doesn't map cleanly to the idea of being "on a page".

reactjs

two-way-binding

0 Answers

Your Answer

Accepted video resources