If there is no mistake:
- React-Router's
<Link/>component can carry over data (state) when the user doesn't leave the current tab or you force the user to open new tab on left click usingtarget="_blank". Otherwise the state you send with it is lost because we'll have a new empty history stack. - localStorage can be used to share state between tabs but it's problematic in scenarios where i just want to store the data for only the regarding tab user is expected to navigate.
e.g. I want to set a state using the state/data I've stored for that specific tab and doesn't want to store it anymore/ forget about it. In this case, synchronization problems may occur when the user actually creates multiple tabs using the same
<Link/>component but doesn't navigate to all of them. How?- Say, I've removed the state item from the storage when the component is unmounted in one of the tabs user is already navigated and, later on the user is navigated to another tab expecting the item in the storage to set the state. (The component in this tab will try to set state with non-existent data / will crash.)
- I could hold the state till the window's
onunloadevent is fired at best, but the problem still exists because localStorage is shared across all of the tabs and removing an item affects all the tabs like i've mentioned. ~ I have to remove the items somehow, can't rely on storage of 2MB to 10MB forever. I tried to find other solutions like clearing it once in a while on user logout/login but that would force the user to take those actions again, once in a while.
So I want to be able to store selected the state/data on sessionStorage of the newly instantiated tab and it gets cleared for me when that tab is closed and I don't have to deal with the regarding problems.
The problem could be defined with simpler words as: I want to send a piece of data from one tab to another with empty history stack in the scope of only that tab.
- Because I don't need it anywhere else.
- I can do things like
setStateusing that data, remove that data etc. and the other tabs launched in need of that data don't get affected.
I've searched through the other questions but there are not detailed answers covering this scenario or I couldn't come across with a best practice for this kind of stuff using ReactJS. Sorry If this is a duplicate.