En la clase anterior hemos aprendido cómo podemos utilizar Real Router, pero hemos visto solo rutas estáticas.
¿Qué pasa? Que muchas veces tenemos rutas dinámicas, con segmentos dinámicos.
Por ejemplo, barra, detail, barra y la id, o barra, search, barra y la búsqueda.
Y esos segmentos no sabemos qué valor van a tener de antemano, porque son dinámicas.
Pues vamos a ver en esta clase cómo podemos capturar estos segmentos y cómo podemos leer esa información para buscar los datos en nuestra aplicación.
Vamos a ello. Estos paths son muy estáticos.
Aquí tienes un tú a esta URL, o sea, esta path estático.
Nodes, users, lo que sea.
Pero ¿qué pasa? Que podría ser que tú quieras ir a una URL donde la idea sea un parámetro y poder leer ese parámetro.
¿Dónde nos puede ocurrir esto? Pues justamente aquí en root.
Si hacemos root aquí y además nodes, hacemos dos puntos id, esto es muy parecido a como lo hacemos en Express, ¿no?
Le estamos diciendo, vale, yo sí que sé que va a ser el segmento nodes, luego barra, y aquí puede ser la id 1, la 2, la 3, la 4.
Así que para capturar ese parámetro de la ruta vamos a poner aquí id.
Por ahora vamos a dejar esto, vamos a poner aquí que sea single detail, o single node, y luego lo arreglaremos.
Pero al menos ya estamos manejando que tenemos una ruta de alguna forma que está parametrizada.
Bueno, pues ya que tenemos el nodes que funciona correctamente, vamos al nodes, aquí, donde estamos renderizando esto, por aquí deberíamos tener un map, por aquí, por aquí.
Vale, tendríamos dentro de node, vamos a entrar dentro de node.
Y aquí ahora mismo no tenemos ningún enlace, vamos a hacer que sea posible entrar a una nota.
Para ello vamos a importar aquí link del React Router DOM.
Y en el contenido vamos a hacer que sea un link to, ahora lo añado eso, y vamos a hacer esto, ¿vale?
Ahora esto es un enlace.
¿Hasta dónde queremos ir?
Pues vamos a ir a barra nodes, barra la id de la nota.
Vamos a guardar los cambios, y ahora podemos ver que se han convertido en enlaces.
Si yo me voy a este enlace, voy a single node, pero bueno, ahora mismo siempre es lo mismo, o sea, no se ve nada.
Deberíamos tener alguna forma de que se vea la información, o sea, ahora mismo no tiene mucho sentido que se vea de esta forma.
Vamos a crear un nuevo componente en un momentito que nos enseña esta información.
Vamos a llamarle node detail, por ejemplo.
Importamos React, desde React, export, const, node detail, y vamos a renderizar aquí, por ejemplo, podríamos hacer que tenga un div.
Podríamos ir aquí el node content, me lo ha importado porque ha querido.
¿Qué más podríamos tener de información?
Bueno, creo que teníamos el node user, y además también sabíamos si era importante o no era importante la nota, ¿no?
Pues si node important, vamos a decir que es important, y si no, pues no decimos nada.
Esto lo ponemos con un strong y ya está.
¿De dónde viene esto?
Vale, esto lo podemos hacer de diferentes formas.
Por ahora, por ahora, luego lo arreglaremos, lo que vamos a hacer es pasar todas las notas.
Y que esto, aquí dentro, vamos a decidir cuál es la nota que tenemos que mostrar aquí, ¿vale?
O sea, vamos a hacer un node igual y lo vamos a recuperar de nodes.
En nodes, ¿dónde tenemos que buscar?
Pues tenemos la nota y vamos a decirle node.id que sea igual al id que tenemos en la url, ¿vale?
Si miramos aquí en la url, ¿ves?
Aquí tengo la id.
Así que ahora lo que necesitamos es saber cómo puedo leer esta información, cómo puedo recuperar esta idea justamente de la url.
Obviamente podría hacer cosas muy chungas, aparte leyendo el pathname, ¿vale?
Pero nada de eso.
Esto no va a ser necesario.
No vamos a tener que extraer y hacer cosas aquí, sino que el real router nos da una forma súper sencilla de leer esta información.
Acuérdate que en nuestra aplicación, aquí habíamos puesto dos puntos id, ¿no?
Tú el nombre que le pongas aquí, le puedes poner node.id, por ejemplo, node.id, le puedes llamar como tú quieras.
Vamos a ponerle node.id para que veas claramente cómo esto luego tiene una repercusión en el código de cómo leemos esta información, ¿vale?
Vamos a llamarle node.id.
Si volvemos a nuestro node.details, ¿cómo recuperamos ese node.id?
Node.id, ¿no?
La había llamado.
Node.id, node.id, sí, node.id, ¿vale?
Este node.id lo que necesitamos es leerlo de la url.
Pues tenemos un hook que se llama useparams, que es de RealRouterDome, ¿ves?
Que lo ha importado directamente.
Import useparams de RealRouterDome.
Y este hook lo que nos va a permitir al ejecutarlo es recuperar los parámetros de la url.
Si le hemos llamado id, pues tendríamos que poner aquí id.
Si le hemos llamado node.id, pues ponemos node.id, que en este caso sería node.id.
Y este node.id es el que vamos a utilizar para justamente buscar de todas las notas que le vamos a pasar a este componente
y encuéntrame la nota que tenga la id que sea la misma que tenemos en la url.
Y una vez que tengamos esta información de la nota, pues justamente ya podremos mostrar esta info.
Todavía nos queda un detalle y es utilizar este node.id, obviamente.
Así que nos vamos a la app y en lugar de mostrar este h1 single node, vamos a poner el node.id, a ver, para que me lo importe automáticamente.
¿Veis? Me ha importado.
Tenemos el node.id y le vamos a pasar todas las notas.
¿Qué problema además nos encontramos aquí?
Que en realidad las notas no están aquí, sino que estarían dentro de esta.
Por ahora vamos a ver cómo podríamos hacer esto.
Por ahora lo vamos a hacer así y luego ya lo cambiaremos de otra forma.
Importamos el useEffect.
Necesitamos el useService.
Y no os preocupéis que esto luego lo iremos arreglando.
¿Vale?
Porque esto con el custom hook nos quedará mucho mejor que no tener que hacer todo esto.
Initial nodes.
State initial nodes.
¿Vale?
UseState.
Hacemos esto.
En lugar de initial nodes vamos a poner setNodes.
Notes.
SetNodes.
¿Vale?
Y estas notas las vamos a pasar directamente aquí.
Luego esto lo vamos a refactorizar y así que quedará bastante mejor que no hacerlo así.
Además en nodes, en el detalle de la nota, tenemos que asegurarnos que ha encontrado una nota.
Si no ha encontrado una nota lo que tenemos que hacer es devolver null.
Si no tenemos la nota, devolvemos null.
¿Vale?
Y vamos a ver lo que tiene la nota una vez que la encuentra.
No tengo muy claro cuál es el...
¿Vale?
Content.
No sé qué.
No sé cuánto.
User.
Ta, ta, ta.
Username.
Eso es porque este node.user tenemos aquí el name.
¿Vale?
Y estoy intentando renderizar un objeto.
¿Vale?
Ya lo tendríamos.
Ahora ya tendríamos home.
Nodes.
Iríamos al enlace suscribirte a mi dev.
¿Vale?
Ahora me ha dejado aquí una cosa que podemos hacer aquí.
Sería el optional chaining.
Esa sería una.
Entonces ahora ya podemos encontrar y entrar a cualquier nota.
Y dentro tendríamos la URL, recuperar la nota.
Y ya tenemos todo esto.
¿Ves?
Podemos entrar.
Vamos a ver.
Y vemos la nota en grande.
Aquí tendríamos el nombre del usuario y nos diría si es importante o no es importante.
¿Vale?
Con la lista de notas ya lo tendríamos.
También con la URL parametrizada.
Vale.
Ya tenemos la URL parametrizada.
Ya tenemos tema de rutas.
Hemos hecho esto que luego ya veremos cómo lo podemos arreglar para no repetir este código que justamente hace exactamente lo mismo.