Estoy desarrollando una PWA en React (con react-router) que incluye un Shell con 3 pestañas. Cada una de estas pestañas contiene varias pantallas. Esto separa la aplicación en 3 árboles completamente separados.

Lo que tengo: cada uno de los 3 botones de Shell está vinculado a la primera pantalla en el árbol asociado (gracias a history.push(): history.push('/login') para el primer botón, history.push('/' ) para el segundo y history.push('/my') para el tercero). Cuando el usuario hace clic en una de las 3 pestañas, lógicamente lo lleva a la primera pantalla de la estructura de árbol.

Lo que me gustaría: cuando el usuario hace clic en uno de los botones de Shell, lo lleva a la última pantalla que visitó dentro del árbol asociado a ese botón. Un ejemplo:

1. El usuario abre la aplicación y va a la pestaña 1. Esto lo lleva a la página '/iniciar sesión'
2. Desde esta página, hace clic en "Crear una cuenta", lo que lo lleva a la página '/registro' (todavía en el mismo árbol)
3. Hace clic en el segundo botón del Shell, eso lo hace cambiar de árbol y continuar con '/'
4. Vuelve a hacer clic en el primer botón de Shell y vuelve a '/registro' en lugar de '/iniciar sesión

Lo que puedo hacer, pero...: Puedo crear un contexto que mantenga la última URL visitada para cada árbol y recuperarla al hacer clic en uno de los botones de Shell para llevar al usuario al lugar correcto. Funciona, no hay problema. Sin embargo, tengo que agregar la actualización de contexto para cada nueva página que creo. No muy bien... Y siento que es un poco raro y "hecho a mano". Un caso de uso clásico como este seguramente debería ser manejado por react-router, o de una manera más simple.

¿Tienes alguna idea de la forma correcta de lograrlo? ¡Muchos gracias!