P11T1_Navegacion_useNavigate.md

Navegación (useNavigate)

Dentro del componente <Card /> tenemos un botón que se debe encargar de mostrar la vista del detalle de un personaje. Para poder generar esta interacción debemos usar el hook de useNavigate de react-router-dom, y luego debemos navegar al id cuando se pulsa el botón de ver más.

...
import { useNavigate } from "react-router-dom"

export const CardComponent: FC<Character> = ( { id, ... } ) => {
    const navigate = useNavigate()

    return (
        <Card sx={ { maxWidth: "345px" } }>
            ...
            <CardActions>
                <Button onClick={ () => navigate( `/${ id }` ) } ...>Ver más</Button>
            </CardActions>
        </Card>
    )
}

---

Anterior		Siguiente
Página por personaje (useParams)	Readme	Redux - Introducción a redux-toolkit