Estoy tratando de retroceder cada vez que hago clic en el botón pero no funciona, por favor, ¿alguien puede ayudarme con lo que estoy haciendo mal?
aqui esta el codigo de la pagina de inicio
import Header from './Header'; import TinderCards from './TinderCard'; import SwipeIcon from './SwipeIcon'; import { useNavigate } from 'react-router-dom'; const Home = () => { const navigator = useNavigate(); return ( <div> <Header backButton={() => navigator.goBack()} /> <TinderCards/> <SwipeIcon/> </div> ) } export default Home;aquí está el componente de encabezado
<div className='header'> {backButton ? ( <IconButton > <PersonIcon className='header__icon' fontSize='large'/> </IconButton> ): ( <IconButton onClick={backButton}> <ArrowBack className='header__icon' fontSize='large'/> </IconButton> )} </div>aquí está el componente de chats
importar encabezado desde './Header'
const Chats = () => { return ( <div> <Header/> </div> ) }exportar chats predeterminados
Probar:
{!backButton ? ( <IconButton> <PersonIcon className='header__icon' fontSize='large'/> </IconButton> ): ( <IconButton onClick={backButton}> <ArrowBack className='header__icon' fontSize='large'/> </IconButton> )}La función de navigate tiene dos firmas:
Pase un valor To (del mismo tipo que <Link to> ) con un segundo { replace, state } arg opcional o
Pase el delta al que desea ir en la pila de historial. Por ejemplo, navigate(-1) es equivalente a presionar el botón Atrás.
Más información: https://reactrouter.com/docs/en/v6/api#usenavigate
EDITAR: Además, en el componente de encabezado, debe invertir su lógica a medida que agrega onClick solo cuando no hay backButton prop, por lo que debería ser algo como:
<div className='header'> <IconButton onClick={backButton ? backButton : null }> <ArrowBack className='header__icon' fontSize='large'/> </IconButton> </div>elimino el botón de retroceso en el componente de inicio y llamo a la función de navegación en el componente de encabezado
import { IconButton } from '@mui/material'; import { ArrowBack } from '@mui/icons-material' const Header = ({backButton}) => { const navigate = useNavigate() return ( <div className='header'> {backButton ? ( <IconButton > <PersonIcon className='header__icon' fontSize='large'/> </IconButton> ): ( <IconButton onClick={() => navigate(-1)}> <ArrowBack className='header__icon' fontSize='large'/> </IconButton> )} ) } export default Header