useHistory

El hook useHistory gestiona un historial de rutas personalizadas utilizando sessionStorage. Proporciona funcionalidades para rastrear las rutas visitadas y retroceder a una ruta específica.

Importación

Para importar el componente useHistory, se puede hacer desde fenextjs

import { useHistory } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
name	string	no	"fenextjs-history"	Clave utilizada para almacenar el historial de rutas en el almacenamiento de sesión.

NOTA

Para que useHistory funcione correctamente debe ser ejecutado en _app o el layout mas superior que se posea.

import type { AppProps } from "next/app";
import { useHistory } from "fenextjs";
 
export default function App({ Component, pageProps }: AppProps) {
  useHistory({});
  return <Component {...pageProps} />;
}

Returns

Parametro	Tipo	Descripcion
paths	string[] \| undefined	Lista de rutas almacenadas en el historial.
currentPath	string \| undefined	Ruta actual basada en el historial almacenado. Corresponde a la última ruta registrada.
onBack	(props: useHistoryOnBackProps) => void	Función para retroceder a una ruta anterior en el historial.

useHistoryOnBackProps

Propiedades para el uso de onBack:

Nombre	Requerido	Descripcion
onValidateRuteBack	no	Función para validar si la ruta de destino es valida para redireccionar.

Usos

Inicializar el historial de rutas

const { paths, currentPath } = useHistory();

Retroceder a una ruta previa

const { onBack } = useHistory();
onBack({});

Retroceder a una ruta previa restringiendo la pagina '/restricted'

const { onBack } = useHistory();
onBack({
  onValidateRuteBack: (path) => path !== "/restricted",
});

useSessionStorage useOnline