Using url params for state w/ multiple components on a page
I follow the concept of using url for state in some cases where you refresh a page and want the same filters, sorting etc.. applied, it works great if it was a single table on a simple page. How does (or should it) this approach work on something like a Dashboard page, that may have multiple tables, lists, etc...
Ending up with something like
?table1SortBy=...&table2SortBy=... feels weird to me.
Thanks for any guidance.2 Replies
rising-crimson•4mo ago
You can put any piece of json (even nested structures) into the query params. tanstack router handles the serialization. If you are planning to store more data than you are comfortable with, there is always localstorage to ensure that a view does not disappear on a hard reload. Just keep in mind that you loose the ability to share/bookmark a deep link to the specific view.
rising-crimson•4mo ago
For some more information: https://tanstack.com/router/latest/docs/framework/react/guide/search-params#json-first-search-params
And I would suggest to basically create a zod schema (or whatever validation library you use) for the expected inputs for each of your components and then combine them together to one big schema for the entire dashboard page.
Search Params | TanStack Router React Docs
Similar to how TanStack Query made handling server-state in your React and Solid applications a breeze, TanStack Router aims to unlock the power of URL search params in your applications. 🧠 If you ar...