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.