0
335
Vistas¿Cómo pasar y usar parámetros de consulta a través del enrutador de reacción?
Estoy tratando de tomar el valor de un parámetro de consulta a través de la URL y usarlo para una llamada de API, por ejemplo:
import { Link, useSearchParams } from "react-router-dom"; const CommonTypes = () => { let [searchParams, setSearchParams] = useSearchParams(); const handleClick = (car) => { setSearchParams({ type: car }); }; return ( <> <div className=" w-screen"> <div className="container mx-auto max-w-5xl px-10 grid grid-cols-2 gap-10 py-10"> <div className=" min-w-7xl h-fit border rounded-lg border-stone-900 p-5 pb-16 text-left "> <h1 className="font-semibold text-xl mb-2 font-sans"> <span className="text-red-500 font-semibold text-xl font-sans"> Common </span>{" "} types of choice </h1> <p className="font-sans font-medium"> You can quickly pick a category from here by clicking on one of the following icons </p> <p> ----------------------------------------------------------------- </p> <div className="grid grid-cols-3 gap-14 text-center "> <Link to={"/sub-cars"} onClick={handleClick(hatchback)}> <div className=""> <img src={hatchback} alt="" className="w-44 h-28"></img> <p>----------------</p> <span className="font-sans font-semibold text-red-500"> HATCHBACK </span> </div> </Link>como puede ver, estoy pasando el tipo de valor, pero la URL no pasa por un parámetro de consulta, por ejemplo: http://localhost:3000/sub-cars?type=hatchback, así que puedo usarlo dentro de la nueva página para una llamada api, mi otro componente se ve así
const Models = () => { let [searchParams, setSearchParams] = useSearchParams(); useEffect(() => { console.log("lol"); console.log(searchParams.get("type")); }, []); return ( <> <Navbar /> <span>{searchParams.get("type")}</span> </> ); };3 Respuestas
Responde la pregunta0
Creo que está utilizando reaccionar enrutador dom v6, tiene algunas actualizaciones nuevas, para navegar al usuario a otra página y pasar la consulta de búsqueda, puede hacer algo como a continuación, reemplazar así para vincular e importar createSearchParams desde react-router-dom
<Link to={{ pathname: "sub-cars", search: `?${createSearchParams({ type: "cars" })}` }} > import { useNavigate, createSearchParams, Link } from "react-router-dom"; export default function Home() { const navigate = useNavigate(); return ( <div> <Link to={{ pathname: "sub-cars", search: `?${createSearchParams({ type: "cars" })}` }} > <button>First Method - Take me to Sub Cars</button> </Link> <br /> <br /> <button onClick={() => { navigate({ pathname: "sub-cars", search: `?${createSearchParams({ type: "cars" })}` }); }} > Second Method - Take me to Sub Cars </button> </div> ); }Puedes consultar los códigos y la caja también
0
Creo que esto se debe a useSearchParams en useEffect. pruébelo usando fuera del efecto y haga dependencia del tipo en efecto.
por ejemplo..
const Models = () => { let [searchParams, setSearchParams] = useSearchParams(); let type = searchParams.get("type") useEffect(() => { console.log("lol! the type is " , type ); }, [type ]); return ( <> <Navbar /> <span>{type}</span> </> ); };0
puede enviar los datos de su deseo a través del estado de la ubicación y capturarlos en la nueva página (donde está redirigiendo) mediante el gancho de ubicación, así:
<Link to={{pathname: "/sub-cars", state: {carDetails: yourValue}}} onClick={handleClick(hatchback)}> <div className=""> <img src={hatchback} alt="" className="w-44 h-28"></img> <p>----------------</p> <span className="font-sans font-semibold text-red-500"> HATCHBACK </span> </div> </Link>y ahora del otro lado
import {useLocation} from 'react-router-dom'; your function { const location = useLocation(); const [car, setCar] = useState(location.state.carDetails) }