Implementing dynamic tabs in React: preserving state, multiple tabs, and URL params strategies

[LouayDev]

im working on a React application that features a dynamic side navigation bar, the key functionality im aiming for involves the ability to open multiple tabs within the application when specific links in the sidebar navigation are clicked, each link click not only takes the user to a new page but also dynamically creates a new tab within the app

once these tabs are opened, the user should be able to seamlessly switch between them, and the state of each tab should be preserved, this means that if a user interacts with the content in one tab and then switches to another, the state of the first tab should be maintained, also i plan to heavily rely on storing the tab's query params and filter options in the URL ,this way, when a user shares a link with someone else the recipient can see exactly what the sender is seeing, including the specific tab configuration and content

im interested in recommendations and best practices for implementing this dynamic tab behavior within a React application, especially regarding React Router and state management, thank you for your help!

[kergian]

That's roughly the case I'm working on right now. If the goal is to store the state of all open tabs and share the link with someone, so that another person can get the same state as you by pasting the link into their browser, then the most reliable way is to store everything in URL parameters, for example: example.com/section-name?subsection=products&active-tab=goods&sub-tab=luxury&selected-item=item1&selected-item=item2 and so on.

It should be taken into account that any updating of parameters in the URL by means of the library will lead to page re-rendering, which is not always the desired behavior. I solved it the way I described in my comment here

[LouayDev]

thanks for the recommendation, but now i figured using Recoil for dynamically generating tabs (tabs are basically just links that needs to be in sync with the url search params and fitlers) and using React query for querying and caching the data to make it persist between tabs switching

and i also will be syncing the tabs in session storage so when the user refreshes the page the tabs will persist, but not the different pages's state since that one is stored in react query's, hit me up if you want to know more about how its all working)

[kiliman]

I have an example that I call scoped params.

https://github.com/kiliman/remix-scoped-params

[afd57]

Hello @LouayDev, thank you for your question. I am working on a similar functionality where I need to open a new tab with different components based on the clicked tab. However, the tab management logic is really messed up. Do you have any sample code on how to add and close tabs?

(Note: I am integrating a multi-tab view into a large existing UI codebase. Many components are using React Router state and history push, etc. Currently, I have an inefficient workaround that prevents me from using the benefits of React Router. If you could share your approach, it would be very helpful.)

[layerok]

@afd57 here is an example https://github.com/layerok/react-router-tabs