A mi <code>props.history.push('/') </code> Me da error por que el <code>props.history </code> es undefined alguien sabe que puede pasar? ...

Ruben Peña

Pregunta

student•hace 5 años

A mi

props.history.push('/')

Me da error por que el

props.history

es undefined

alguien sabe que puede pasar?

este es mi código:

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { loginRequest } from '../actions'
import '../assets/styles/components/LoginForm.scss'
import googleIcon from '../assets/static/google-icon.png'
import twitterIcon from '../assets/static/twitter-icon.png'

const LoginForm = props => {
    const [form, setValues] = useState({
        email: '',
    })
    const handleInput = event => {
        setValues({
            ...form,
            [event.target.name]: event.target.value
        })
    }
    const handleSubmit = (event) => {
        event.preventDefault()
        props.loginRequest(form)
        props.history.push('/')
    }
    return (
        <section className="login">
            <section className="login__container">
                <h2>Inicia sesión</h2>
                <form className="login__container--form" onSubmit={handleSubmit}>
                    <input
                        name="email"
                        className="input"
                        type="text"
                        placeholder="Correo"
                        onChange={handleInput}
                    />
                    <input
                        name="password"
                        className="input"
                        type="password"
                        placeholder="Contraseña"
                        onChange={handleInput}
                    />
                    <button className="button">Iniciar sesión</button>
                    <div className="login__container--remember-me">
                        <label>
                            <input type="checkbox" id="cbox1" value="first_checkbox" />Recuérdame
                        </label>
                        <a href="/">Olvidé mi contraseña</a>
                    </div>
                </form>
                <section className="login__container--social-media">
                    <div><img src={googleIcon} /> Inicia sesión con Google</div>
                    <div><img src={twitterIcon} /> Inicia sesión con Twitter</div>
                </section>
                <p className="login__container--register">
                    No tienes ninguna cuenta
                    <Link to="/register">
                        Regístrate
                    </Link>
                </p>
            </section>
        </section>
    )
}

const mapDispatchToProps = {
    loginRequest,
}

export default connect(null, mapDispatchToProps)(LoginForm)

Ruben Peña

student•hace 5 años

Andrés ya encontre la respuesta con tu ayuda...

withRouter(connect(null, mapDispatchToProps)(LoginForm))

Esa es la forma correcta... y tengo que hacerlo así por que el profe tiene el login en un container y yo lo separe en un componente... justamente era lo único que tenia diferente... pero no sabia que influía en eso... ahora que lo arregle me doy cuenta que alguien también lo había comentado en el chat... jajajaja gracias hermano!

Ruben Peña

student•hace 5 años

Antes que nada Andrés, Muchas gracias por tomarte el tiempo para responder mi pregunta... lamentablemente no me funcionó... ahora lo que no entiendo es que al profe le funciona con connect... será que hay una actualización al lenguaje con respecto a history?

Andres Moreno

student•hace 5 años

Perdona, dejame corregir el error que tengo en el codigo anterior Debes exportarlo de la siguiente forma:

export default compose(
  withRouter,
  connect(null, mapDispatchToProps)
)(LoginForm);

Saludos!!

Andres Moreno

student•hace 5 años

Puedes exportar el component LoginForm con withRouter, pero como en este caso se está usando redux, tienes que exportarlo con compose, de la siguiente forma:

export default compose(
	withRouter,
	connect(null, mapDispatchToProps)(LoginForm)
)

No te olvides de agregar ++withRouter++ en los named-imports de react-router-dom que tienes en la parte de arriba Y ++compose++ es un metodo de la libreria react-redux

Espero te sea de ayuda, un saludo!

A mi <code>props.history.push('/') </code> Me da error por que el <code>props.history </code> es undefined alguien sabe que puede pasar? ...

Curso de React Router y Redux

Curso de React Router y Redux