Traté de implementar el enrutador modal como en el ejemplo del enrutador de reacción , pero funciona cuando se usa con Link , pero no funciona cuando trato de usar history.push . Estoy tratando de implementar modal multinivel con navegación programática. Compruebe el bombardeo de la pila
// This works <Link to={{ pathname: `/img/${id}`, state: { background: location } }} > <Thumbnail color={color} /> <p>{title}</p> </Link> // This doesn't <a href="#" onClick={ () => history.push({ pathname: `/img/${id}`, state: { background: location } }) }> <Thumbnail color={color} /> <p>{title}</p> </div> // My Router <div> <Switch location={background || location}> <Route path="/" exact component={Home} /> <Route path="/contacts" exact component={Contacts} /> </Switch> {background && <Route path="/contact/:name" children={<Modal />} />} </div> ¿Cómo soluciono esto para que funcione sin la etiqueta de Link ? ¿Cuál es el error en el código utilizado?
Creo que esto podría resolverse agregando event.preventDefault(). Porque cuando hace clic en el enlace, se vuelve a cargar toda la página y nunca se ejecuta history.push()
<a href="#" onClick={ (e) => { e.preventDefault() history.push({ pathname: `/img/${id}`, state: { background: location } }}) }>