Cursos Empresas Blog Live Conf Eventos Precios

0:003:41

Recursos

Resumen

Sincronizar un input de búsqueda con la URL es una práctica común en aplicaciones como Platzi o YouTube, donde lo que escribes en el buscador queda reflejado en la dirección del navegador. En este reto vas a replicar ese comportamiento dentro de la aplicación de todos construida con React Router, conectando el estado del buscador con la URL para que la búsqueda sea compartible y persistente.

¿En qué consiste el reto de sincronizar búsqueda y URL?

La idea es que el texto escrito en el input de búsqueda se traslade automáticamente a la URL y, al mismo tiempo, que cualquier valor presente en la URL precargue el filtro del buscador al abrir la página.

En la aplicación ya tienes una barra de búsqueda que filtra los todos a partir del estado searchValue. Si escribes cortar, aparece solo el to do que coincide; si nada coincide, se muestra un mensaje de que no hay resultados. Lo que falta es que ese filtro viaje también por la URL.

¿Por qué llevar el valor del buscador a la URL? Para que la búsqueda sea compartible. Si copias y pegas la URL en otra pestaña, la app debe cargar el mismo filtro aplicado, igual que ocurre en Platzi o YouTube.

¿Cómo inspeccionar la URL actual con location.hash?

Para entender qué información viaja en la dirección, puedes apoyarte en el objeto location del navegador, que expone propiedades como location.href y location.hash [01:00].

Como el proyecto usa hash navigation, el dato relevante está en location.hash. Hoy, sin importar lo que escribas en el buscador, ese valor no cambia y siempre apunta al mismo home. Ese es justo el comportamiento que debes modificar.

Detecta el valor del input de búsqueda en tiempo real.
Refleja ese valor dentro de location.hash o como parámetro de búsqueda.
Lee ese valor al cargar la app para inicializar el filtro.

¿Cómo lograr la sincronización en ambos sentidos?

La sincronización debe funcionar en dos direcciones, y aquí viene lo interesante: el input alimenta a la URL, y la URL alimenta al input.

Del input hacia la URL

Cuando el usuario escribe en el buscador, además de actualizar el estado searchValue, debes actualizar la URL. Si escribes patito, la dirección debería reflejarlo, por ejemplo con un segmento como search=patito.

De la URL hacia el input

Si alguien abre una pestaña nueva con una URL que ya contiene un término de búsqueda, la app no debe responder con un not found. Debe renderizar el mismo home, pero con el filtro ya aplicado a partir de lo que indique la URL.

¿Qué hacer si la URL muestra not found al buscar? Significa que la ruta no está definida para aceptar parámetros dinámicos. Debes configurar la ruta para que lea el valor de búsqueda y lo pase como filtro inicial al home.

¿Qué clases conviene repasar antes de resolverlo?

Este reto se apoya en conceptos que ya trabajaste antes, así que vale la pena volver sobre ellos si algo no fluye [02:30].

Las clases de URLs dinámicas, donde aprendiste a definir rutas que aceptan parámetros variables.
Las clases recientes de integración de React Router, en las que leíste IDs desde la URL para transmitirlos entre vistas y condicionar qué renderizar.

La diferencia es que aquí no vas a editar un to do a partir de su ID, sino a buscar todos a partir de un término que vive en la URL.

¿Qué es la hash navigation? Es una forma de manejar rutas en aplicaciones de una sola página usando el fragmento # de la URL, evitando recargas y permitiendo que el cliente controle qué vista mostrar.

¿Cómo compartir tu solución en comentarios?

No importa si lo resuelves al primer intento o no, lo que importa es dar el 110 % de esfuerzo y documentar el proceso.

Cuenta qué intentaste primero y por qué no funcionó.
Describe la segunda alternativa y el resultado.
Si lograste hacerlo funcionar, comparte el detalle que destrabó la solución.

Los mejores comentarios son los que muestran el camino recorrido, no solo el resultado final. Cuéntame en los comentarios cómo conectaste el input con la URL y qué descubriste por el camino.

Sincronizar el buscador con la URL

Curso de React.js: Navegación con React Router

Clase 26 de 30

Clase 26 / 30

Donovan RM

Hace 3 años

La hice de esta manera apoyandome de los compañeros:

import React from 'react';

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

import './TodoSearch.scss'

function TodoSearch({``loading``, ``searchValue``, ``setSearchValue``}) {

const [searchParams, setSearchParams] = useSearchParams();

const paramsValue = searchParams.get('search'); const updateSearchParams = (``value``) => { setSearchParams({ search: ``value`` }); }; if (paramsValue) { setSearchValue(paramsValue); }; return (

<section ``className``="cont-box"> <input

placeholder``="Busca tu tarea"

value``={paramsValue ?? ''} ``onChange``=

{(``event``) => { const value = ``event``.target.value; setSearchValue(value); updateSearchParams(value); }} ``disabled``={``loading``} />

...

</section>

</div> );} export { TodoSearch };

Comentarios (28)28 comentarios

Bramucci Candela

Hace 4 años

Diego Portillo

Impecable

Andres Prieto

Acá te faltó un condicional para que te cargue la busqueda directamente cuando abres la URL con una busqueda, es solo un if:


&#x20; if (paramValue) {

&#x20;   setSearchValue(paramValue);

&#x20; }

Arturo Mauricio Terceros Beltrán

Para resolver el reto se puede ulitlizar el hook useSearchParams

En el HomePage.jsx agregamos:

 const [params, setParams] = useSearchParams();

Y se lo enviamos a TodoSearch:

<TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          params={params}
          setParams={setParams}
        />

Ya en TodoSearch.jsx lo manejamos de la siguiente manera:

import React, { useEffect } from "react";

function TodoSearch({ searchValue, setSearchValue, params, setParams }) {
  const onSearchValueChange = (event) => {
    setSearchValue(event.target.value);

    let params = {
      search: event.target.value,
    };
    setParams(params);
  };

  useEffect(() => {
    const search = params.get("search") ?? "";
    setSearchValue(search);
  }, [params]);

  return (
    <input
      className="todo-search"
      placeholder="Search..."
      type="text"
      value={searchValue}
      onChange={onSearchValueChange}
    />
  );
}

export { TodoSearch };

De esa manera logramos el siguiente resultado !useSearchParams

Juan Castro

Profesor

:clap::clap::clap:

David Espino

Uff, cuando te enfrentas a retos como este te es cuando realmente comprendes lo que creías entender de la clase. Logré de resolverlo de la siguiente manera:

Dentro de App.js modifiqué la propiedad path para que aceptara el valor searchValue, también dejé el valor anterior para que la Route de HomePage siguiera funcionando aunque no se enviara el valor searchValue:
En TodoSearch.js utilicé useParams para cachar el valor searchValue de la url y se lo envie como value al input
-Dentro de un useEffect() evalúo si params.searchValue existe, sí es así, actualizo el searchValue que recibimos desde props.
En la función onSearchValueChange agregue un navigate hacia el valor del input:
No sé si es la mejor solución, pero funciona :)

Diego Garcia

Angel David Contreras Barrios

A caray!!

Enrique Aguilera

yo utilice el hook useSearchParams para poder modificar los query params en la url, y también useEffect con un array vacio en el segundo argumento para que solo en el primer render se asigne el valor del searchParams al input

José Eduardo Vinagre de Dios

Hace un año

Neil Ruiz

Max Andy Diaz Neyra

Juan Mercado

Brianda Raquel Campoy Esquer

No quize aplicar eso en el TodoMachine pero lo implemente aqui https://briandacampoy.github.io/poke-api/#/

Mariana Contreras

Jhunior Eduardo Guevara Lázaro

Para que no navegue por cada valor tipeado en el input, agregué una funcion(handleKeyDown) al componente TodoSearch para que solo navegara hacia la ruta de busqueda cuando se apriete la tecla "enter".

 const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      // 👇 Get input value
      navigate(`/?search=${event.target.value}`);
    }
  };

// el input en el TodoSearch es:
<input
      disabled={loading}
      // autoFocus
      className="TodoSearch"
      placeholder="cargando ..."
      onChange={onSearchValueChange}
      value={searchValue}
      onKeyDown={handleKeyDown}
    />

// fijarse el nuevo metodo onKeyDown que llama a la funcion handleKeyDown

Jairo Felipe Nieto Ruiz

https://nieto35.github.io/personal-page/#/api

Reto completado con Api de git Hub

YEEEEEESSSS ¡Muy bien hecho, Jairo! :clap:

Edward Junior Ramos VIllarreal

Se utilizaría la propiedad search del hook useLocation para capturar la query que se le pasa a la url. Teniendo eso se hace el filtrado y se muestra el valor en el input. Y para el otro caso, se utilizaría el useNavigate al hacer submit.

Diana Florez

Me suena q es con useLocation 🤔

Gerardo J. Rito

Hace 9 meses

La forma en que funciona el hook useSearchParams se me hace muy parecida a useState solo que este hook cambia la url no un estado en memoria y ese cambio provoca un re-render.

ANGEL DAVID SULBARAN CALDERON

Hace un año•editado

Yo lo hice directamente en el TodoSearch, fue lo mas simple que pude ver sin mucho codigo

import { useSearchParams } from "react-router-dom";
import "./TodoSearch.css";

const TodoSearch = ({ searchValue, setSearchValue, loading }) => {
  const [searchParams, setSearchParams] = useSearchParams();

  const onChange = (e) =>{
        setSearchValue(e.target.value)
        setSearchParams({search: e.target.value})
  }

  return (
        <input
      type="text"
      placeholder="Buscar Todo"
      className="TodoSearch"
      value={searchValue || searchParams.get("search")}
      onChange={onChange}
      disabled={loading}
    />
  );
};

export default TodoSearch;

Ricardo Daniel Quiroga

Matias SANCHEZ

alguien pudo realizarlo porque me rompi la cabeza pensando y no encontré una ?

Te comparto mi solución compañero :) Dentro de App.js modifiqué la propiedad path para que aceptara el valor searchValue, también dejé el valor anterior para que la Route de HomePage siguiera funcionando aunque no se enviara el valor searchValue:

En TodoSearch.js utilicé useParams para cachar el valor searchValue de la url y se lo envie como value al input

-Dentro de un useEffect() evalúo si params.searchValue existe, sí es así, actualizo el searchValue que recibimos desde props.

En la función onSearchValueChange agregue un navigate hacia el valor del input:

No sé si es la mejor solución, pero funciona 😃

Recursos

Resumen

Sincronizar el buscador con la URL

Progreso del curso

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos