La barra de búsqueda de mi encabezado funciona navegando a "buscar?q=" al presionar el botón, leyendo los parámetros de la URL de la página de búsqueda y procesándolos, pero cuando estoy buscando desde la página de búsqueda, la URL toma esta forma "buscar/buscar?q= ". ¿Cómo puedo omitir la "búsqueda" adicional en este caso?
Intenté esta solución pero no funcionó.
import React, { useState } from 'react' import { useLocation, useNavigate } from 'react-router-dom' import './style.css' function SearchBar() { const navigate = useNavigate(); const location = useLocation(); const [input, setInput] = useState('hi'); const search = () =>{ const path = location.pathname if(path.includes('search')) navigate('?q='+input) else navigate('search?q=' + input) } return ( <form class="form-inline"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" onChange={e=>{setInput(e.target.value)}}/> <button class="btn btn-outline-success my-2 my-sm-0" type="submit" onClick={search}> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> </svg> </button> </form> ) } export default SearchBarCambia tu código así. He agregado onSubmit en la etiqueta del formulario. E hizo un pequeño cambio en search() .
Además, agregué un useEffect para obtener parámetros de url.
import React, { useEffect, useState } from "react"; import { useLocation, useNavigate, useParams } from "react-router-dom"; import './style.css' function SearchBar() { const navigate = useNavigate(); const location = useLocation(); const params = useParams(); const [input, setInput] = useState("hi"); const search = (e) => { e.preventDefault(); const path = location.pathname; if (path === "/search") { navigate("?q=" + input); } else { navigate("search?q=" + input); } }; useEffect(() => { const param = new URL(window.location.href).searchParams.get("q"); if (param) console.log(param); }, [params]); return ( <form className="form-inline" onSubmit={search}> <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" onChange={(e) => { setInput(e.target.value); }} /> <button className="btn btn-outline-success my-2 my-sm-0" type="submit"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" className="bi bi-search" viewBox="0 0 16 16" > <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> </svg> </button> </form> ); } export default SearchBar;