Tengo un problema con la lógica de navegación en React y sería increíble obtener ayuda.
Tengo una aplicación web front-end escrita en TypeScript, React y Ionic Framework V5.
La aplicación tiene un cuadro de búsqueda bastante estándar que redirige a una página de resultados con la ubicación /search?query={query here} .
Cuando presiono el botón de búsqueda, React Router maneja la navegación. Soy redirigido a la página de resultados y la consulta de búsqueda aparece en la barra de direcciones del navegador, pero la cadena de consulta está vacía cuando se recupera en la lógica del componente funcional, lo que me da resultados de búsqueda incorrectos.
El cuadro de búsqueda dirige a la página de resultados así:
<IonButton fill="clear" className="search-button" routerLink={`/search?query=${searchValue}`}> <IonIcon name="search-outline" /> </IonButton>routerLink es simplemente un asistente de Ionic para React Router, el problema es el mismo si encapsulo el botón en una etiqueta <Link/> normal.En la página de búsqueda, la cadena de consulta se lee así:
const Home: React.FC<SimplePageProps> = ({ axios }) => { const queryParams = useQuery(); const param = queryParams.get('query'); const [products, setProducts] = useState([]); useEffect(() => { axios.get(`/products?query=${param}`) .then((response) => { const data = camelcaseKeys(response.data, { deep: true }); setProducts(data.items.map((product: Product) => ( <IonCol key={product.id} size-md="4" size-xl="3"> <ProductCard product={product} /> </IonCol> ))); }) .catch((error) => { // TODO show error element console.error(error); }); }, [axios, param]);Como se mencionó, la cadena de consulta está vacía cuando se obtiene en la lógica del componente funcional, lo que me da resultados de búsqueda incorrectos. Cuando actualizo la página, la cadena de consulta no está vacía y aparecen los resultados de la búsqueda. ¿Algunas ideas?
Muchas gracias de antemano!
Después de dormir en él y buscar un poco más, logré arreglar esto.
Mi solución fue reducir las cosas a un comando de JavaScript estándar, window.location.search . Esto siempre obtiene los parámetros de consulta correctos de la URL, mientras que los ganchos auxiliares de React Router no estarían undefined cuando se enrutaran por primera vez a la página.
useLocation() se incluye para que cuando se realice otra búsqueda desde la página de resultados, el componente React se vuelva a representar para reflejar la nueva cadena de consulta.
const Home: React.FC<SimplePageProps> = ({ axios }) => { // parse query string parameter const { search } = window.location; const query = new URLSearchParams(search).get('query'); useLocation(); // including this forces a re-render when the URL changes const [products, setProducts] = useState([]); useEffect(() => { axios.get(`/products?query=${query}`) .then((response) => { const data = camelcaseKeys(response.data, { deep: true }); setProducts(data.items.map((product: Product) => ( <IonCol key={product.id} size-md="4" size-xl="3"> <ProductCard product={product} /> </IonCol> ))); }) .catch((error) => { // TODO show error element console.error(error); }); }, [axios, query]);