Función JavaScript para Manipulación de Rutas y Hashes

¿Cómo obtener el identificador (ID) del hash de la URL?

Contar con una función que obtenga un identificador específico de la URL es crucial para la navegación en una aplicación web. En este caso, se busca manipular la URL para extraer el "hash" y acceder a elementos específicos. Este proceso es esencial para proporcionar plantillas adecuadas y garantizar que las rutas internas funcionen correctamente.

Creación de la función para obtener el hash

Comencemos creando la función indispensable para identificar la ruta que el usuario está accediendo en nuestra aplicación.

const getHash = () => location.hash.slice(1).toLowerCase().split('/')[1] || '/';

Pasos importantes en la función:

1. Acceso al hash: Se utiliza location.hash para obtener el hash de la URL.
2. Eliminación de caracteres no deseados:
   • slice(1): Remueve el símbolo # del inicio del hash.
   • toLowerCase(): Convierte el hash a minúsculas para eliminar discrepancias por uso de mayúsculas.
   • split('/'): Divide la cadena en un arreglo, utilizando el carácter / para la separación.
3. Obtención del ID: El uso de [1] nos permite obtener el valor limpio del ID en la URL.
4. Valor por defecto: En caso de que no haya un hash, regresa '/'.

Exportación de la función

Una vez que la función es creada y probada, es importante exportarla para ser utilizada en otras partes de la aplicación.

export default getHash;

¿Cómo resolver las rutas dinánicamente?

Una aplicación web robusta requiere una función que permita redireccionar al usuario a la plantilla adecuada según la ruta accedida.

Implementación de la función de resolución de rutas

Vamos a crear una función llamada resolveRoutes, la cual se encargará de redirigir al usuario correctamente según la ruta obtenida.

const resolveRoutes = (route) => {
  if (route.length <= 3) {
    let validRoute = route === '/' ? route : '/:id';
    return validRoute;
  }
  return `/${route}`;
};

Detalles de la función:

1. Validación de longitud: Se verifica si la longitud de la ruta es de hasta 3 caracteres, facilitando la distinción entre demás rutas y parámetros.
2. Rutas identificadas por / o /:id:
   • Si es '/', se le retorna como tal.
   • Caso contrario, se le asigna el identificador /:id.
3. Retorno de otras rutas: Si el valor de la ruta es mayor a 3 caracteres longitudes, el formato /${route} será el retorno.

Exportación de la función

Para garantizar que las rutas sean manejadas correctamente a lo largo de la aplicación, es importante exportar esta función también.

export default resolveRoutes;

¿Cómo integrar estas utilidades en nuestra aplicación?

Desde el lugar donde gestionamos las rutas, es crucial importar las funciones y utilizarlas para una correcta navegación en la aplicación.

Integración de las funciones getHash y resolveRoutes

Procedamos a la utilización de estas utilidades dentro de nuestro manejador de rutas.

import getHash from './utils/getHash';
import resolveRoutes from './utils/resolveRoutes';

// Aplicar la lógica de resolución de rutas en la sección correspondiente
let route = getHash();
let routeResolved = resolveRoutes(route);

Esta estructura nos asegura que la lógica de navegación se alinea con las directrices de la aplicación, utilizando eficientes y limpias funciones para manejo y resolución de rutas. Con esta implementación, las rutas de la aplicación son más robustas y claras, apoyando una experiencia de usuario fluida. Aprovecha cada herramienta y técnica para mejorar tus proyectos, y sigue impulsando tu aprendizaje en el desarrollo web.