0

Estoy creando un formulario de registro de datos, al darle click al boton me guarda los datos en la DB pero no navega a la pantalla siguiente... ESTE ES MI CODIGO

<Link to="/Dashboard" ><button>Finalizar</button></Link>

Si quito las etiquetas link el boton guarda los datos, y al dejarlo como en el ejemplo pasa a la ruta (ventana DASHBOARD) pero sin guardar los datos, estoy usando como DB firebase

PD: eh tratado de usar route link redirect & no funcionan

¿Que puedo hacer? 😔😏

1 respuesta 1

1

Lo que sucede es que al final cuando eso hace render, te queda una estructura similar a esta:

<a href="/Dashboard">
    <button>Finalizar</button>
</a>

Y es sencillo lo que sucede, ambos son objetos de acción, ya que al hacer click en teoría cada uno hace una acción de acuerdo a lo que está predeterminado. Pero si uno está jerárquicamente debajo del otro, entonces viene la pregunta, si le haces click a uno, posiblemente no se lo hagas al otro. Y esa es la razón de por qué no cuando quitas uno funciona de otra forma, pero cuando están los dos no tienes el comportamiento que deseas.

Para ello, solucionarlo es sencillo. Simplemente trata de mantener la lógica de lo que quieres hacer, pero con un solo elemento de acción, por ejemplo, que quede solamente así:

<button onClick={this.finalizar.bind(this)}>Finalizar</button>

// En tu función
finalizar(e) {
    // realizas tu acción de envíar los datos, y al final redireccionas
    ...
    this.props.history.push({to: '/Dashboard'});
}

Cabe resaltar, que esto es lo poco que puedo ayudarte de acuerdo a la información que das, estoy suponiendo que de por sí debes tener una función encargada de enviar los datos al servidor, y que lo estás haciendo por medio de AJAX. De no ser así y que tu formulario se esté recargando cada que le das al botón de finalizar, entonces la re-dirección debes hacerla desde el servidor

Otra nota, es que para que esto funcione, el componente donde tienes la función con el this.props.history.push debería ser un hijo directo del router, para que este le pase las propiedades necesarias, entre esas history. Pero de no ser así puedes encapsular tu componente con esta función llamada withRouter quedando algo así:

Tu archivo

// tus imports ...
// import { withRouter } from 'react-router';

class MyComponent extends Component { ... }

export default withRouter(MyComponent);

Puede ser en el export, el punto es que con esa función le das el contexto necesario a tu componente para trabajar con el router

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.