Estoy tratando de recrear la lógica de enrutamiento superficial de Instagram, que se ve así:

1. el usuario está en instagram.com/p/cristiano .
2. hace clic en una de las imágenes.
3. url cambia a instagram.com/p/Cd0... , en lugar de ser llevado a la página de detalles, al usuario se le presenta un modal
4. en la salida modal, la URL cambia de nuevo a instagram.com/p/cristiano .

Así es como estoy tratando de recrear esta lógica:

shallowRoutingOrigin es la página desde donde estoy abriendo el modal: podría ser savedworkouts , discovery o u/${username}

 const handleShallowRoutingClick = (documentId: string) => { router.push( `/${shallowRoutingOrigin}?documentId=${documentId}`, `workoutpreview/${documentId}`, { shallow: true, } ); setModalIsOpen(true); }; const handleModalClose = () => { router.push(`/${shallowRoutingOrigin}`, undefined, { shallow: true, }); setModalIsOpen(false); };

La siguiente lógica y el efecto deseado funcionan en los savedworkouts y las páginas de discovery , sin embargo, cuando trato de abrir el modal desde u/${username} , en lugar de enmascararlo. url como /workoutpreview/id1 se enmascara como /u/workoutpreview/id1 y obtengo 404 error de esta página no encontrada.

¿Qué hace que esta lógica no funcione en la página del usuario?