Rutas dinámicas — JS: Desarrollo web

• Rutas dinámicas
• Parámetros de ruta
• Manejo de errores
• Múltiples parámetros de ruta
• Orden de definición

Hasta ahora solo hemos encontrado rutas estáticas. En estas rutas no hay partes cambiantes, la dirección coincide exactamente con la ruta y no cambia. En la práctica, las rutas dinámicas son más comunes. Para dar un ejemplo, analicemos las direcciones de los cursos en Códica:

• https://app.codica.la/courses/js_objects_course
• https://app.codica.la/courses/js_data_abstraction_course
• https://app.codica.la/courses/css_grid_course

En esta lección, aprenderás sobre rutas dinámicas y cómo trabajar correctamente con múltiples parámetros de ruta y el orden de definición.

Rutas dinámicas

Volvamos a las direcciones de los cursos en Códica:

• https://app.codica.la/courses/js_objects_course
• https://app.codica.la/courses/js_data_abstraction_course
• https://app.codica.la/courses/css_grid_course

Notarás que estas direcciones tienen una estructura específica:

/courses/

Para estas direcciones, se crea exactamente una ruta, en la que la parte cambiante se inserta a través del contexto como un parámetro:

import fastify from 'fastify';

const app = fastify();
const port = 3000;

app.get('/courses/:id', (req, res) => {
  res.send(`Course ID: ${req.params.id}`);
});

app.get('/users/:id', (req, res) => {
  res.send(`User ID: ${req.params.id}`);
});

app.listen({ port }, () => {
  console.log(`Example app listening on port ${port}`);
});

En estos ejemplos, nos encontramos con rutas dinámicas. Contienen partes cambiantes, pero solo hay un controlador para la ruta. Por ejemplo, las direcciones de los cursos mencionadas anteriormente corresponden a una sola ruta, que se puede escribir así:

`/courses/${id}`

En esta ruta, la sección :id significa que un identificador de curso específico va en su lugar:

curl localhost:3000/courses/132
Course id: 132

curl localhost:3000/courses/js_objects
Course id: js_objects

El nombre de la parte cambiante se puede elegir a voluntad, por ejemplo, en lugar de :id se puede escribir lala. La forma de escribir depende del marco específico. Aquí hemos escrito el nombre con dos puntos adicionales :, como se acostumbra en Fastify.

Parámetros de ruta

La parte cambiante de la ruta en Fastify se llama parámetro de ruta. En el ejemplo anterior, solo hay un parámetro: id. Accedemos a él a través de la propiedad req.params.id:

const id = req.params.id;

Al igual que con los parámetros de la consulta, el parámetro de la ruta será una cadena.

¿De dónde vienen los valores específicos en los parámetros de la ruta? Los enlaces específicos se forman en las páginas del sitio.

Para que sea más conveniente para los usuarios, los desarrolladores intentan usar no identificadores numéricos en las direcciones, sino nombres legibles para los humanos. Por ejemplo, en lugar de /courses/332 muestran /courses/php-mvc. Esta parte de la dirección se llama slug. En cada caso, usamos un slug único, mientras que su formato debe cumplir con los requisitos para formar direcciones.

Por lo general, tales nombres contienen caracteres latinos con guiones entre las palabras:

this-that-other-outre-collection

Resumamos:

• Los conceptos de "dirección" y "ruta" denotan cosas diferentes.
• Si la ruta es estática, siempre coincide con la dirección, por ejemplo, /about.
• Si la ruta es dinámica, puede corresponder a un número infinito de direcciones, incluso si no existen tales páginas en el sitio, por ejemplo, /courses/:id.

Manejo de errores

La mayoría de los marcos permiten establecer cualquier valor como parámetro. Un parámetro se considera un conjunto de caracteres que se encuentra entre los caracteres de la barra / o después del último de éstos. El marco no sabe qué valores son apropiados en nuestro caso, por lo que no puede tomar una decisión en lugar del programador.

Supongamos que en nuestra base de datos hay 10 cursos con identificadores del 1 al 10. La dirección de cada curso se forma así:

/cursos/:id

En este caso, la dirección /cursos/1 devolverá el curso con el identificador 1. Pero la dirección /cursos/11 dará un error 404, porque tal curso no existe. Para que el programa funcione exactamente de esta manera, debemos implementarlo correctamente. En teoría, el código debería realizar dos acciones obligatorias:

• Comprobar la disponibilidad de datos en la base de datos.
• Devolver una respuesta con el código 404 en los casos en que no haya datos.

El código se ve algo así:

const state = {
  users: [
    {
      id: 1,
      name: 'user',
    },
  ],
};

app.get('/users/:id', (req, res) => {
  const { id } = req.params;
  const user = state.users.find((user) => user.id === parseInt(id));
  if (!user) {
    res.code(404).send({ message: 'User not found' });
  } else {
    res.send(user);
  }
});

Múltiples parámetros de ruta

A veces en una ruta puede haber más de un parámetro. Por lo general, estas rutas se utilizan para recursos anidados. Así es como funciona el siguiente ejemplo, donde las lecciones están anidadas en los cursos:

import fastify from 'fastify';

const app = fastify();
const port = 3000;

app.get('/courses/:courseId/lessons/:id', (req, res) => {
  res.send(`Course ID: ${req.params.courseId}; Lesson ID: ${req.params.id}`);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

Orden de definición

Cuando trabajas con rutas dinámicas, debes prestar atención al orden en que se definen. De lo contrario, nos podemos encontrar con una situación en la que una misma dirección corresponda a varias rutas. Si esto ocurre, el marco elegirá la ruta adecuada que vaya primera en el orden de definición.

Mira este ejemplo:

app.get('/courses/:id', (req, res) => {
  res.send(`Course ID: ${req.params.id}`);
});

app.get('/courses/new', (req, res) => {
  res.send('Course build');
});

Con este orden, el programa procesará la solicitud en la página /cursos/nuevo a través de la ruta /cursos/:id. Esto no es lo que queríamos. Para corregir esto, intercambiaremos las rutas:

app.get('/courses/new', (req, res) => {
  res.send('Course build');
});

app.get('/courses/:id', (req, res) => {
  res.send(`Course ID: ${req.params.id}`);
});

La situación con el controlador incorrecto se repetirá si agregamos un curso en el que el valor id sea nuevo. Para prevenir este problema, simplemente prohibimos crear tales id.

Trabajo independiente

1. Realiza todos los pasos de esta lección en tu computadora.
2. Siguiendo el ejemplo de la lección, añade en la aplicación un controlador que procesará las solicitudes en la ruta users/{id}/post/{postId}.
3. Inicia la aplicación y asegúrate de que todo funcione correctamente.
4. Sube los cambios a GitHub.

Materiales adicionales

1. URL amigable / Wikipedia