Uso de searchParams y params en componentes React cliente-servidor

¿Cómo crear una ruta dinámica en tu proyecto?

Comenzar un proyecto puede ser intimidante, especialmente cuando se trata de manejar rutas complejas. Aquí te guiaremos paso a paso para crear una ruta dinámica en tu aplicación, usando los patrones de búsqueda de manera efectiva.

Primero, debes dirigir tu atención a la estructura de tu carpeta de proyectos, específicamente a la carpeta de la aplicación. Allí, crea una nueva carpeta llamada Product y dentro de ella, una ruta dinámica con corchetes, nombrándola Handle.

¿Cómo se crea un archivo de página en TypeScript?

Dentro de la carpeta de ruta dinámica Handle, crea un archivo llamado page.tsx. Este archivo contendrá una función exportable y asíncrona, llamada productPage, que regresará un simple título.

export default async function productPage() {
  return <h1>Product Page</h1>;
}

Con este pequeño fragmento de código, has creado una base en la que podrás extender tus funcionalidades, permitiéndote tener una vista individual de un producto. A continuación, accede a la ruta en tu navegador para confirmar que todo funcione correctamente ingresando una dirección local, como http://localhost/Product/vehículo-volador.

¿Cómo usar search patterns con props?

El siguiente paso es aprender a hacer fetch usando los search patterns de tu producto. Comienza creando una interfaz llamada ProductPageProps. Esta interfaz contendrá un objeto searchPatterns y su propiedad id.

interface ProductPageProps {
  searchPatterns: {
    id: string;
  };
}

Incluye estas props en tu página de productos y utiliza console.log para verificar que estás obteniendo el ID correcto.

export default async function productPage(props: ProductPageProps) {
  console.log(props.searchPatterns.id);
  return <h1>Product Page</h1>;
}

Al abrir la consola, deberías ver el ID correspondiente, permitiéndote interactuar con la variante o ID del producto.

¿Cómo acceder a parámetros en componentes anidados?

Si estás trabajando con componentes anidados dentro de tu aplicación y no tienes acceso directo a los parámetros, puedes usar el hook useParams. Este hook es esencial al trabajar en componentes de tipo cliente.

import { useParams } from 'react-router-dom';

function NestedComponent() {
  const params = useParams();
  console.log(params.handle);
}

Este enfoque es valioso cuando los componentes están profundamente anidados y no puedes pasar las props directamente desde el nivel superior. Sin embargo, es importante recordar que los hooks no deben usarse dentro de componentes asíncronos.

¿Cómo obtener searchParams en un componente?

Para acceder a los search parameters o searchParams, utiliza el hook useSearchParams. Similar al anterior, este hook también es exclusivo para componentes cliente.

import { useSearchParams } from 'react-router-dom';

function ClientComponent() {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');

  console.log(id);
}

A diferencia de useParams, useSearchParams no devuelve un objeto, sino que obtenemos los parámetros mediante una función get. Esto es particularmente útil si estás desarrollando experimentos de A/B testing, configuraciones de página, o haciendo tracking analítico mediante URLs.

Al implementar estos conceptos, has aprendido a manejar parámetros dinámicos y de búsqueda en tus aplicaciones. Recuerda la importancia de distinguir entre params y searchParams: mientras los primeros son útiles para recursos específicos, los segundos brindan flexibilidad al agregar configuraciones adicionales a tus URL. ¡Continúa refinando tus habilidades y observa cómo construyes aplicaciones más robustas y dinámicas! 🛠️🚀