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 😀.

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.

este profe es demasiao’ 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.

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

Esto de rutas dinamicas es como cuando en un Ecommerce vas y cambias entre productos, la base de la url es la misma, lo que cambia es lo ultimo, el slug

La logica es:

1. Cuando entras al blog, producto, la clase, etc. Seteas el slug. Basicamente, seteas la url. Pero esa url no existe, no está trackeada.

2. Vas al app.js o donde sea que tengas el proveedor de rutas y renderizas algo como

   <Route path="/blog/:slug" element={<BlogPost />} />
   

3. Dentro del componente <BlogPost /> obtienes el slug a traves de useParams(). Con ese slug puedes encontrar el objeto cuyo slug sea el mismo y así ya tienes la información para renderizar.

Basicamente, seteas la url con un slug personalizado. Renderizar un componente cuyo path tiene esa sintaxis “/:slug” despues del url base. Ese slug lo obtienes en el componente a renderizar para poder obetener la inforamción a renderizar. Renderizas.

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

useParams: rutas dinámicas

.
Vamos a crear un componente BlogPage que va a recorrer un array desde un archivo blogData, dicho array contiene información general de los posts. Sin embargo, la información más importante será el slug puesto que utilizaremos esta propiedad para distinguir las rutas dinámicas para los posts.
.

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

function BlogPage(){
	return(
		<>
			<h1>BlogPage</h1>
			
			<ul>
			{blogdata.map(post=>(<BlogLink post={post}/>))}
			</ul>
		</>
	);
}

function BlogLink({post}){
	return(
		<li>
			<Link to={`/blog/${post.slug}`}>{post.title}</Link>
		</li>
	);
}

export{BlogPage};

const blogdata=[];

blogdata.push({
	title:'¿Qué es React?',
	slug:'que-es-react',
	content:'React es el mejor framework de JavaScript.',
	author:'juandc',
});

blogdata.push({
	title:'¿Qué es Vue?',
	slug:'que-es-vue',
	content:'Vue es el mejor framework de JavaScript.',
	author:'diannerd',
});

blogdata.push({
	title:'¿Qué es Angular?',
	slug:'que-es-angular',
	content:'Angular es el mejor framework de JavaScript.',
	author:'nicobytes',
});

export{blogdata};

.
Dentro del componente App, si deseamos establecer rutas para cada publicación en nuestro array, la opción convencional nos obligaría a crear múltiples rutas, variando únicamente el slug final.
.
No obstante, al emplear rutas dinámicas, solo necesitamos definir una única ruta, /blog/:slug, donde los dos puntos denotan su naturaleza dinámica. Lo que sigue después indicará la parte variable, que puede adoptar cualquier valor o nombre, en este caso, el slug.
.

function App() {
  return (
    <>
      <HashRouter>
        <Menu />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/blog" element={<BlogPage />} />
          <Route path="/blog/:slug" element={<BlogPost />} />
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="*" element={<p>Not found</p>} />
        </Routes>
      </HashRouter>
    </>
  );
}

.
Finalmente, utilizaremos el React Hook useParams para obtener el parámetro o la parte variable de la ruta dinámica, que en este caso es el slug. Luego, emplearemos esta información para buscar el post correspondiente dentro del array de posts y renderizar sus datos utilizando el componente BlogPost.
.

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

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

  const blogpost = blogdata.find(post => post.slug === slug);

  return (
    <>
      <h2>{blogpost.title}</h2>
      <p>{blogpost.author}</p>
      <p>{blogpost.content}</p>
    </>
  );
}

export { BlogPost };

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

Angular muirio xD

BlogPage

{blogpost?.title}

{blogpost?.author}

{blogpost?.content}

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