Estoy tratando de lograr esto

import {isAuthorized} from '../somewhere'
async componentDidMount() {
   const authorized = await isAuthorized()
   if(!authorized){
   this.props.history.push('/login')
  }
}

En ganchos de reacción, ¿cómo puedo lograr esta funcionalidad exacta, gracias

0
kritiz 13 jun. 2020 a las 21:32

4 respuestas

La mejor respuesta

Puede usar useHistory enganche para obtener acceso al history instancia y llame a history.push dentro de un useEffect para navegar a la ruta deseada.

import {isAuthorized} from '../somewhere';
import { useHistory } from "react-router-dom";

function SomeComponent(props) {
  const history = useHistory()

  useEffect(() => {
    const navigate = async () => {
       const authorized = await isAuthorized();

       if(!authorized){
          history.push('/login')
       }
    }

    // call the async function 
    navigate()

  }, [])
}

Tenga en cuenta que React no permite que la devolución de llamada para useEffect sea una función async debido a posibles condiciones de carrera. Por lo tanto, debe definir una nueva función async dentro del gancho useEffect e invocarla.

1
subashMahapatra 13 jun. 2020 a las 18:50

Creo que en este caso podrías usar el gancho useHistory que se usa así:

import React from 'react'
import { useHistory } from 'react-router-dom'

export default props => {
    const history = useHistory()

    React.useEffect(() => {
        const isLogged = async () => {
            const authorized = await isAuthorized()
            return authorized
        }
        const authorized = isLogged()
        if(!authorized)
            history.replace('/login') // to replace the route , in order to push : history.push('/login')
    },[])
}

EDITAR:

Sí, no se puede hacer asíncrono, cambié la respuesta. Lo siento.

1
CevaComic 13 jun. 2020 a las 18:45
useEffect(() => {
const apiCall = async () => {
  const authorized = await isAuthorized()
   if(!authorized){
   props.history.push('/login');
  }
}

apiCall()
},[]) 

Debe ajustar su wait en una función asincrónica y llamar a esa función asincrónica apiCall en el cuerpo de la función useEffect.

1
Omar 13 jun. 2020 a las 18:39

Deberá usar el gancho useEffect:

useEffect(async () => {
  const authorized = await isAuthorized()
   if(!authorized){
   props.history.push('/login') // note: not this.props but simply props
  }
},[]) // empty array to call effect in mounted period.

Pero reaccionar no permite realizar una acción asincrónica directamente en useEffect hook. Podría envolver una función asíncrona dentro de eso:

useEffect(() => {
  (async () => {
   //...
  })()
},[])

Para obtener más detalles, puede consultar mi otra publicación.

1
Bhojendra Rauniyar 13 jun. 2020 a las 18:44