useParams: rutas dinámicas

useParams: rutas dinámicas

¿Qué son las rutas dinámicas?

Digamos que tenemos una aplicación la cual nos envía a cierto contenido, ejemplo aplicación/blog/como-aprender-react, esta ultima parte en negro se llama slug, lo que nos permite es tener una base en la que exponer cierto contenido, pero intercalando la información en caso de que el slug cambie también.

Por ejemplo, en caso de que cambiemos el enlace pero la base sea la misma ejemplo: aplicación/blog/como-aprender-svelte, nos daríamos cuenta de que la maquetación sigue siendo la misma, solo que tiene diferente información, ya que si el slug cambia, el contenido cambia, pero como parte de una sola base, tiene la misma composición pero diferente contenido.

Un ejemplo rápido de las rutas dinámicas son los perfiles en Facebook, tienen la misma composición, tienen una foto de perfil, de portada, un nombre, información del usuario, estados y publicaciones; pero el perfil de Juanita no es el mismo que el de Pepe, ya que cada uno tiene información diferente porque son personas diferentes y publican diferente contenido.

Creemos nuestras rutas dinámicas

Vamos a hacer nuestras rutas dinámicas en nuestro componente de BlogPage:

import React from 'react';
import { Link } from 'react-router-dom';
import { blogdata } from '../Data/blogdata'

/* Como en nuestro anterior componente, aquí cargarémos la 
información de manera dinámica por medio de un arreglo, para que 
nuestro código sea más mantenible a futuro y evitar duplicidad y 
crear verdaderos componentes */
function BlogPage() {
  return (
    <>
      <h1>Blog Page</h1>

      <ul>
        {blogdata.map( post => (
          <BlogLink post={post} />
        ))}
      </ul>
    </>
  );
}

/* Este BlogLink srá el que contenga los datos que nos crearan 
nuestro slug y nos redireccionen al contenido que deseamos ver */
function BlogLink({ post }) {
  return (
    <li>
      <Link
        to={`/blog/${post.slug}`}
      >{post.title}</Link>
    </li>
  );
}

export { BlogPage }

blogdata.js

/* Este Array simula una API que contenga nuestros datos, estos 
cargarán dinámicamente el contenido a los fake blogs */ 
const blogdata = [];

blogdata.push({
  title: '¿Que es React?',
  slug: 'que-es-react',
  content: 'React es el mejor Framework de JavaScript, que lindo React',
  author: 'Andrés Rodríguez'
});

blogdata.push({
  title: '¿Que es Vue?',
  slug: 'que-es-vue',
  content: 'Vue es el mejor Framework de JavaScript, que lindo Vue',
  author: 'Andrés Rodríguez'
});

blogdata.push({
  title: '¿Que es Angular?',
  slug: 'que-es-angular',
  content: 'Angular esta bien, que lindo React XD',
  author: 'Andrés Rodríguez'
});

blogdata.push({
  title: '¿Que es Svelte?',
  slug: 'que-es-svelte',
  content: 'Svelte es el mejor Framework de JavaScript, que lindo Svelte',
  author: 'Andrés Rodríguez'
});

Una vez tenemos esto, debemos hacer que nuestros componentes se traqueen en la aplicación. Para esto debemos ir a App.js e ir a nuestro componente correspondiente y a continuación en su path después de su ruta debemos indicarle seguido de dos puntos, cual es el nombre de la variable en la cual tenemos nuestra nueva ruta. Veamos como:

// Importamos el componente de una vez
...
import { BlogPost } from './Components/Routes/BlogPost/BlogPost';

function App() {
  return (
    <>
      <HashRouter>
        ...
        <Routes>
          ...
					{/* En este caso la ruta dinámica se almacena en "slug" */}
          <Route path='/blog/:slug' element={<BlogPage />} />
        </Routes>
      </HashRouter>
    </>
  )
}

Ahora todos esos cambios dinámicos se van a poder detectar y renderizar. Aún así debemos crear el componente que se renderice, entonces hagámoslo, este será el BlogPost.js.

import React from 'react';

// Importamos el useParams
import { Link, useParams } from 'react-router-dom';
// También necesitamos los datos aquí
import { blogdata } from '../Data/blogdata'

function BlogPost() {
  /* Para cargar la información dinámicamente en la página debemos 
  hacer uso del "useParams", este por medio de un objeto que debemos 
  destructurar nos traerá el slug */
  const { slug } = useParams();

  /* Lo que hacemos por acá es encontrar la información que 
  necesitamos mediante una confición en un fin que nos envíe y 
  guarde en esta variable los datos del post cuyo slug coincida con 
  el que estamos solicitando por un compoente para que se renderice */
  const blogpost = blogdata.find( post => post.slug == slug );

  /* Ahora si, después de que encontremos la información que 
  necesitamos podemos cargarla en nuestro componente y renderizarla */
  return (
    <>
      <h2>{blogpost.title}</h2>
      <p>{blogpost.author}</p>
      <p>{blogpost.content}</p>
    </>
  );
}

export { BlogPost }

Y si probamos veremos que ya está cargando nuestro contenido, hemos aprendido a crear rutas dinámicas con React 😀.

este profe es demasiao’ bueno

Gracias a los useParams podemos renderizar información de manera dinámica. Para lograr esto lo que debemos a hacer es, en nuestro router, especificamos el path que vamos a utilizar:

Imaginemos que tenemos una página donde guardamos blogs y que al, darle click a estos, nos envían a una nueva página, en nuestro router vamos a tener algo parecido a esto:

...
<Route path='/blog' element={<BlogPage/>}/>
<Route path='/blog/:slug' element={<BlogPost/>}/>
...

La primera del path es igual que la de su ruta superior, lo que sucede luego es que volvemos a poner un slash seguido de dos puntos y el nombre del parámetro.

Una vez definido el parámetro, dentro de BlogPage vamos a definir los links y sus respectivos paths que continuarán desde blog y dentro de BlogPost llamaríamos al Hook.

export function BlogPost() {
    const {slug} = useParams()

    const blogpost = blogdata.find(post => post.slug === slug)
    return (
        <>
            <h2>{blogpost.title}</h2>
            <p>{blogpost.content}</p>
        </>
    )
}

Con el Hook vamos a poder hacer uso del path que enviamos desde BlogPage. Luego, por medio de una función de filtrado, vamos a encontrar el objeto correspondiente a ese path, para asi mostrarlo.

Hasta el momento, no se ha explicado “bien” qué es exactamente un slug. Este link me sirvió Medium

Angular muirio xD

Que hook se usa para obtener los quer params de una url con estas, por ejemplo:
www.localhost:5050/?title=react&author=carlos

Para mi si programas de forma convencionada, si lees e investigas cuales son estas convenciones, si se es mas framework que biblioteca. pero bueno

En este video el proyecto final hacen un llamado al api dependiendo del id linkeado y mucho mas para su repositorio y practica.
https://www.youtube.com/watch?v=a_7Z7C_JCyo

 <Link to={`/cocktail${id}`} />

const SingleCocktail = () => {
	const {id} = useParams()
	try{
        	const response = await fetch(`${url}${id}`)
...
	}
}

Un pequeño ejemplo.

Se va mucho por las ramas con un tema que es complicado… si sintetizara más sería un buen curso.

Documentación sobre useParams y Segmentos Dinámicos https://reactrouter.com/en/main/route/route#dynamic-segments