9gustin

Creando un router en React 🛣️

Buenas! en este blog quería mostrar como hacer un router en react. Vamos a ver como seria crear el router en si, hacer rutas privadas y hacer rutas dinámicas con parámetros.

Antes que nada, en mi caso voy a crear una aplicación de React desde cero con vite.js pero también es posible omitir este paso y hacerlo con una aplicación existente. Para esto ejecuto el comando:

npm init @vitejs/app wouter-example -- --template react

Luego me muevo a esa carpeta, instalo dependencias y ya tendría mi aplicación lista para comenzar a modificarla. A mi me gusta siempre que inicio una app con vite o CRA remover todos los archivos extras y luego crearlo en caso de necesitarlos. En mi caso deje main.jsx y App.jsx.

Acerca del proyecto

En mi caso voy a hacer algo sencillo, pero que abarque los temas que queremos ver, luego esto se puede escalar con las rutas que necesite tu aplicación.

Vamos a hacer una aplicación que tenga 3 rutas, un login, el home y una ruta que sea para mostrar el perfil de un usuario. Estas ultimas dos van a ser rutas privadas, es decir, que solo se pueden acceder estando logueados.

Y lo interesante de la ruta del perfil es que el id del usuario debe venir en la url, para que sea una una ruta dinámica.

Creando las paginas de la aplicacion

Debemos crear las paginas que se van a renderizar en las distintas rutas. En mi caso cree una carpeta pages que va a tener las rutas, con componentes dummy que solo retornen el nombre de su ruta, ya que nuestro principal objetivo es crear el router.

Acá te dejo el link de como quedo mi carpeta pages, por si te interesa:

wouter-example/pages

Instalando dependencias

Para hacer un router en react hay varias librerías, la mas utilizada es react-router-dom, pero yo quería traer otra alternativa, wouter, que puede hacer lo mismo que react-router-dom, pero es mas nueva y mucho más liviana.

Zero dependency, only 1.36 KB gzipped vs 11KB React Router.

NPM Package

Entonces vamos a agregar el paquete a nuestra aplicacion con el comando

npm i wouter

Creando el router

El router es un componente, que va sobre la aplicación y se encarga de mostrar una pagina u otra en base a la url que se está accediendo.

Para crearlo vamos a crear una carpeta Router, como componente de react. Dentro vamos a tener 3 archivos, estos representas las partes de un router.

Partes del router

  • paths.js

    el archivo de paths se utiliza para contener los paths de la aplicación, es decir las urls de las secciones. Este archivo, por cuestiones de orden en el código, debe ser el único que tengas las urls de la aplicación para que, si algún día quiero modificar una solo deba cambiarla ahí y la ruta continúe funcionando.

    En este caso, nuestro archivo paths quedaría asi:

    Ejemplo de archivo paths con las rutas de la aplicacion

    Con el listado de paths en una constante y una constante que representa la url principal publica, es decir, a la url que hay que dirigir al usuario en caso de que quiera acceder a una ruta privada sin estar loggeado.

    También, se puede ver que para la ruta de profile estoy usando el parámetro id, pero eso lo vamos a ver en detalle mas adelante.

  • routes.js

    El archivo routes se utiliza para conectar los paths con los componentes, cada elemento dentro del array ROUTES contiene una ruta, que tiene un path y el componente que se tiene que renderizar. Además le agregamos el atributo que determina si es una ruta privada o no. Este atributo no es obligatorio, si nuestra aplicación no va a manejar rutas privadas podemos quitarlo sin problema.

    Ejemplo de archivo routes con las rutas de la aplicacion

    Algo que se puede ver también, es que agregue al final una ruta sin path, que se va a renderizar en caso de que el usuario intente acceder a un path que no existe. Para estos casos se suele hacer una pagina de 404, con un mensaje para el usuario.

  • index.jsx

    Este archivo es el Router de nuestra aplicacion, es un componente de React y aca es donde vamos a utilizar wouter. De wouter vamos a necesitar 3 Elementos.

    Primero Switch que es el contenedor de las rutas, es como hacer un switch nativo de js y wouter lo va a utilizar para validar dentro de las rutas que haya dentro a cual ir.

    Luego Route, que se utiliza para representar una ruta particular, en nuestro caso vamos a mappear el array de ROUTES del archivo routes.js en componentes de este tipo. Al Route vamos a pasarle la prop path y la prop children, es decir, que debe renderizar en caso de que el path sea el que el usuario esta visitando.

    Y por ultimo el Redirect lo vamos a utilizar para redirigir al usuario en caso de que quiera visitar una ruta privada sin estar loggeado, este recibe una prop to, que es a donde se lo debe redirigir al usuario.

    Ejemplo de archivo index con el router de la aplicacion

    En mi caso use a modo de ejemplo la variable "session" del localStorage, simulando un loggeo. Utilizo localStorage.setItem("session", "hello world") en caso de querer probar que la validación ande.

    Mismo, si no se quiere utilizar rutas privadas podemos quitar la linea 8, donde leemos el localStorage y podríamos pasarle al componente Route solamente el <route.component/> como children, entonces no habría validación para rutas privadas.

Integrando el Router con la aplicación

Para que las rutas sean accesibles tenemos que agregar el Router a nuestro archivo app, simplemente tenemos que importarlo y retornarlo dentro de lo que retorna el componente App. Te dejo mi archivo app por si queres ver como lo hice yo:

wouter-example/App.jsx

En mi caso yo solo retorno el router, pero si la aplicación tuviese cosas que se deben ver en todas las paginas se podrían agregar en el return junto al Router.

Usando los parámetros de las rutas

Por ultimo, vamos a ver que onda con los parámetros en las urls, ya que en muchos casos necesitamos hacer rutas dinámicas. En nuestro caso seria la ruta profile, en donde se podría ver el perfil con el id que venga en la url. Por lo tanto esto tiene dos lados.

Declarando la variable en la ruta

Como vimos en la parte de Partes del router las urls con parámetros se crean con dos puntos, es decir la ruta profile/:id tiene dos partes, profile es la parte constante de la ruta y luego, lo que venga después de la barra será el valor de la variable id. Por ejemplo, si yo accedo a la ruta /profile/9gustin quiere decir que quiero ver el perfil del usuario con el id 9gustin.

Usando la variable id

Luego en la pagina en particular vamos a querer usar la variable, para, por ejemplo, ir a buscar el usuario a una API y cargar su información en la pagina.

Para tomar el usuario vamos a usar el custom hook de wouter llamado useRoute.

Esto se haria de la siguiente manera:

const [, params] = useRoute(PATHS.profile);

En donde le pasamos a useRoute el path que queremos utilizar y el nos devuelve como segundo parámetro del array la variable params. Params va a contener todos los parámetros de la url(siempre y cuando se hayan declarando con los dos puntos).

Por lo tanto, si yo accedo a /profile/9gustin la variable params.id contendrá el valor "9gustin".

Te dejo la url a Github de como lo deje yo: wouter-example/pages/Profile

Plus

Finalizando, te invito a probar el componente Link, que es parte de wouter. Lo debemos importar al igual que importamos Router, Switch y Redirect y este es la esencia de un router en react, ya que los elementos <Link/> son iguales de utilizar que los <a/>. Pero la diferencia es que el <a/> redirige al usuario al href, haciendo que se tenga que cargar la pagina entera de nuevo. En cambio, al usar el <Link/> el router entiende que el usuario quiere ver otra pagina y se encarga de renderizar el contenido que cambia entre una pagina y otra haciendo mas optimo el cambio de pagina.

En mi caso yo hice un Navbar que tiene las distintas rutas privadas de la aplicación:

wouter-example/components/Nav

Volver