Tengo un modal de configuración con pestañas que son enlaces a rutas. Cuando hace clic en el fondo fuera del modal, ejecuta history.goBack. Pero si ha estado haciendo clic en otras pestañas de configuración, no volverá a la página anterior antes de que se abriera el modal de configuración, sino que volverá a la pestaña de configuración anterior en la que se hizo clic.

Intenté hackear mi camino hacia una solución como contar cuántas pestañas se hizo clic para luego usar history.go (-numberOfTabsClicked) pero quiero saber si hay una mejor manera de hacerlo como no registrar los enlaces de la pestaña de configuración en el historial pila.

Aquí hay algo de mi código si eso ayuda.

 function SettingsTabs(props) { const { path } = props.match; return ( <div className={styles["settings-tabs"]}> <h2>Settings</h2> <Tab linkTo={`${path}?tab=profile`} name="Profile" /> <Tab linkTo={`${path}?tab=account`} name="Account" /> <Tab linkTo={`${path}?tab=themes`} name="Themes" /> </div> ); } function Tab(props) { return ( <NavLink to={props.linkTo} activeClassName={styles["tab-active"]} style={{ textDecoration: "none" }} > <div role="button" className={styles["tab"]}> {props.children} <span>{props.name}</span> </div> </NavLink> ); }

Este es el Modal en el que están envueltos los componentes anteriores.

 function Modal(props) { const history = useHistory(); const { pathname } = useLocation(); history.scrollRestoration = "auto"; const path = props.match; useEffect(() => { window.scrollTo(0, 0); return null; }, [pathname]); return ( <div> <div onClick={() => history.goBack()} className={styles["modal-bg"]} /> {props.children} <div onClick={() => history.goBack()} style={{top: props.top, marginLeft: props.marginLeft}} className={styles["modal-close-btn"]} > <CloseButton /> </div> </div> ); }