useWindowRouter

El hook useWindowRouter es una implementación de un enrutador basado en window.location. Proporciona funcionalidades similares a las de un enrutador de Next.js, pero utilizando la API nativa del navegador para manejar la navegación.

Importación

Para importar el componente useWindowRouter, se puede hacer desde fenextjs

import { useWindowRouter } from "fenextjs";

window.location

El hook utiliza la API nativa del navegador window.location para manejar la navegación y el historial.

Nombre	Descripcion	Default
pathname	La ruta actual de la URL.	window.location.pathname
query	Los parámetros de consulta de la URL.	new URLSearchParams(window.location.search)
hash	El hash de la URL.	window.location.hash

Returns

Parametro	Tipo	Descripcion
asPath	string	La ruta completa actual, incluyendo el pathname, los parámetros de consulta (query) y el hash.
back	() => void	Navega hacia atrás en el historial del navegador.
forward	() => void	Navega hacia adelante en el historial del navegador.
isReady	boolean	Indica si el enrutador está listo. Siempre es `true` en este hook, ya que `window.location` está siempre disponible.
pathname	string	La ruta actual (pathname) de la URL.
push	(url: string) => void	Navega a una nueva URL y añade una entrada al historial del navegador.
query	object	Un objeto que contiene los parámetros de consulta (query) de la URL.
reload	() => void	Recarga la página actual.
replace	(url: string) => void	Reemplaza la URL actual sin añadir una nueva entrada al historial del navegador.
route	string	La ruta actual (pathname) de la URL.

Usos

Navegar a una nueva URL

const { push } = useWindowRouter();
push("/nueva-ruta");

Reemplazar la URL actual

const { replace } = useWindowRouter();
replace("/otra-ruta");

Navegar hacia atrás

const { back } = useWindowRouter();
back();

Navegar hacia adelante

const { forward } = useWindowRouter();
forward();

Recargar la página

const { reload } = useWindowRouter();
reload();

useRouter useApiError