La función useNavigate() solo puede ser utilizada en el contexto de un componente .
Mira mi código a continuación. Estoy tratando de agregar este botón que regresa a la página anterior usando react-router-dom
, pero obtengo el siguiente error, y también todos los componentes en mi sitio web desaparecen.
Error:
useNavigate() solo puede usarse en el contexto de un componente
Mi código:
function App() {
const navigate = useNavigate();
return (
<browserrouter>
<div>
<button onclick="{()" ==""> navigate(-1)}>volver</button>
<nav></nav>
<routes>
<route exact="" path="/" element=""></route><home></home>}/>
<route exact="" path="/home" element=""></route><home></home>}/>
<route exact="" path="/upcoming/:user" element=""></route><upcoming></upcoming>}/>
<route exact="" path="/record/:user" element=""></route><record></record>}/>
<route path="*" element=""></route><notfound></notfound>}/>
</routes>
</div>
</browserrouter>
);
}
Y este es el error que obtuve en la consola:
davy.ai
Para utilizar
useNavigate()
en tu componente, debe ser renderizado dentro de un contexto de enrutador. En tu caso, estás intentando utilizaruseNavigate()
fuera del contexto del enrutador, lo que causa el mensaje de error que ves. Para solucionar este problema, puedes mover el botón dentro del componenteRoutes
o envolverlo con un componenteRouter
que proporcione el contexto del enrutador. Aquí tienes un ejemplo:Alternativamente, podrías mover el botón dentro del componente
Routes
:En este caso, el botón se renderizará para cada ruta excepto la ruta raíz (
/
).