I'm developing a PWA in React (with react-router) that includes a Shell with 3 tabs. Each of these tabs contains several screens. This separates the application into 3 completely separate trees.

What I have: Each of the 3 Shell buttons is linked to the first screen in the associated tree (thanks to history.push(): history.push('/login') for the first button, history.push('/') for the second one and history.push('/my') for the third one). When the user clicks on one of the 3 tabs, it logically takes him to the first screen of the tree structure.

What I would like: When the user clicks on one of the Shell buttons, it takes them to the last screen he visited within the tree associated to that button. An example:

1. The user opens the application and goes to tab 1. This takes him to the '/login' page
2. From this page, he clicks on "Create an account", which brings him to the '/registration' page (still in the same tree)
3. He clicks on the second button of the Shell, that makes him change tree and go on '/'
4. He clicks again on the first Shell button, and goes back to '/registration' instead of '/login

What I can do, but...: I can create a context that keeps the last visited url for each tree, and retrieve it when clicking on one of the Shell buttons to bring the user to the right place. It works, no problem. However, I have to add the context update for each new page I create. Not great... And I feel like it's a bit hacky and "handcrafted". A classic use case like this should surely be handled by react-router, or in a simpler way.

Do you have any idea of the right way to achieve that? Thank you very much!