En los últimos meses he estado escribiendo algunas aplicaciones de las que solemos hacer para nuestros clientes en Fixter.org que por lo regular son full-stack, esto es que necesitamos no sólo la parte del cliente (navegador y todo lo bonito) también requerimos un acceso óptimo y seguro a la base de datos, lo que nos hace escribir aplicaciones que requieren las 2 piezas; backend y frontend, y hoy en día esto es un verdadero reto y mucho trabajo.

Esto era totalmente simple cuando uno podía usar php en crudo o incluso Rails y hasta Django pero claro, estas herramientas limitaban mucho el dinamismo del cliente, mientras era fácil y seguro entregar datos y atender peticiones de ruteo rápido, trabajar con jQuery o puro JavaScript en el cliente para agregar interacciones más interesantes, y ofrecer una experiencia de usuario dinámica (reaccionar a su input por ejemplo) era difícil y desorganizado. Hasta que apareció Backbone, Angular, Ember o el poderoso React.

Pero fue entonces que nos mudamos por completo al Frontend ¡oh no...! y ahora ya no queríamos backend sólo micro servicios; workers, lambdas o firebase functions ¡puf!. De pronto teníamos una copia más compleja de la base de datos en el frontend administrada por ¿Mobex, Flux, Redux? y ya mencioné que sustituimos el ruteo del servidor por ruteo en el frontend con React-router (que en un momento hablaremos más de él) ¿y antes de React-router? (¿recuerdas al gatito? #) ¿te das cuenta cuánto complicamos ser webmaster en los últimos años? El webmaster en los 90 's era un full-stack pero sin tantas herramientas, puro dreamweaver jeje. Ah que tiempos.

Pero esta entrada no es para crear nostalgia, es para comentarte que después de este par de meses trabajando con Remix puedo decirte con toda seguridad que los buenos tiempos han vuelto.

Remix no es sólo un framework para server rendering, es también una forma de administrar mejor tu SPA (single page application) pero desde el servidor. Es como tener un SPA super cargado con cualidades de SSR en 1 sólo proyecto y "Monorepo", que por cierto está de moda, no sólo frontend y backend también para administrar un proyecto con distintos servicios ya sean micro o no, con herramientas bien geniales como NX o Turborepo, pero otra vez me estoy desviando, tengo mucho que platicarte sobre lo que pasa actualmente en la comunidad web, lo iré escribiendo diligentemente en el blog de fixter y en el mío, suscríbete a la lista de correo para que no te pierdas nada.

Por ahora si tu también ya estás trabajando con Remix, hoy quiero mostrarte cómo podemos hacer uso de las herramientas de React-router para construir una navbar 'custom' en una ruta anidada (nested-route) que se active según el pathname, algo muy simple en realidad, pero que resulta super útil. (También puedes intentar usar NavLink si tu navegación no es tan "custom")

useLocation

Desde Remix tenemos acceso a todos los hooks disponibles en React-router no sólo porque los creadores re React-router son los mismos que de Remix, también porque ¡Remix está construido sobre React-router! de esta manera podemos invocar al poderoso hook useLocation para obtener pathname y con esto buscar coincidir según la ruta anidada que coincida.

/* components/parts/NavBar.tsx */
export default function(){
const pathname = useLocation()
// así podemos usarlo directamente para aplicar estilos
return (
	<nav>
	<Link to="/admin/courses">
		<Button className={
			pathname==='/admin/courses' ?
			'linkButtonClass active' :
			'linkButtonClass'
			} >
				Cursos
		</Button>
	</Link>
	<Link to="/admin/courses">
		<Button className={
			pathname==='/admin/users/premium/12345/edit' ?
			'linkButtonClass active' :
			'linkButtonClass'
			} >
				Editar usuario
		</Button>
	</Link>
	</nav>
	)
}

Por supuesto que puedes usar una de las mil maneras de aplicar estilo hoy en día, ¿los mencionamos? Saas, less, css-modules, cssInJs, postCSS, talwind, chakra uff, ¿que fatigoso no?, ¿cuál usas actualmente? Yo estoy montado sobre ChakraUI por velocidad y porque está cool no tener archivos CSS, lo cual va con el feeling que te daría también cssInJS, alguna de las mil estrategias, solo de esta opción 😆.

Ya que el pathname es un estado que va a forzar un render si su valor cambia, podemos confiar en él para que nuestra ruta padre admin.tsx contenga la navegación y está a su vez sepa que link debe estar activado aunque las rutas anidadas sean descendientes de niveles profundos (nietos, bisnietos etc)

|--routes
|--contacto.tsx
|--admin.tsx (Admin usa NavBar.tsx)
	|--courses.tsx
	|--invoices.tsx
	|--users.tsx
	|--users
		|--premium.tsx
		|--premium.$userId.edit.tsx
		|--$.tsx // esto es un splat

No importa lo compleja que sea la estructura anidada (nested) de tus rutas, NavBar será capaz de mostrar el link correspondiente gracias a useLocation

Aquí te dejo el código de una Navbar con animación que construí en este video 😉

Y ya, nomás quería compartir contigo esto, si te ha sido útil, compártelo y déjamelo saber en Twitter para seguir escribiendo sobre Remix y también dime si te gustaría que te platicara más sobre los Monorepos ;)

Nos leemos pronto. Bliss.