Quiero hacer un botón para volver, hice lo siguiente:
const GoBackBtn = ()=>{ const navigate = useNavigate() return (<button onClick={()=>navigate(-1)}> {'<='} </button>) }Funciona muy bien, sin embargo, el problema es cuando visito por primera vez la página web donde se encuentra este componente y estoy en la raíz:
http://localhost:3000/
el problema que ocurre es que cuando hace clic en el botón, lo saca del sitio web a la página en blanco (la página de inicio del navegador, si está usando Chrome, la página de inicio de Chrome).
Quiero evitar eso ocultando el botón si no hay elementos en el historial del enrutador.
Pero, ¿cómo puedo detectar eso?
Quiero mantener esta funcionalidad solo en mi sitio web, no quiero que navegue fuera de mi sitio web o a otros sitios web
React Router tiene un gancho llamado useLocation . Usando este enlace, puede obtener la ruta de la ruta actual. La ruta de la ruta raíz es / .
Agregaría la condición como:
import { useLocation, useNavigate } from 'react-router-dom' const goBackBtn = () => { const location = useLocation() const navigate = useNavigate() const goBack = () => { if (location.pathname !== '/') { navigate(-1) } } return ( <div> {location.pathname !== '/' && ( <button onClick={goBack}> {'<='} </button> )} </div> ) }