URL de ejemplo: https://example.com/?foo=bar

 import { useSearchParams } from 'react-router-dom' const Component = () => { const [searchParams, setSearchParams] = useSearchParams() const foo = searchParams.get('foo') console.log(foo) // "bar" return <></> }

Obviamente, necesita usar esto dentro de un enrutador.

Nota: todos los valores de los parámetros de búsqueda son cadenas.

Siempre ocurría que debería haber accedido al valor de search desde el objeto de location en lugar del objeto de history .

Ver la historia es mutable

El objeto de historial es mutable. Por lo tanto, se recomienda acceder a la location desde los accesorios de representación de <Route> , no desde history.location . Esto garantiza que sus suposiciones sobre React sean correctas en los enlaces de ciclo de vida.

Si el tutorial se muestra usando history.location.search , no le daría mucho peso.

Sin embargo, en react-router-dom@6 ya no hay props de ruta , es decir, no hay props de history , location o match . En su lugar, accede a todos estos a través de ganchos React. Tenga en cuenta que el objeto de history ya no se expone directamente a los componentes, sino que se reemplaza por una función de navigate a través del gancho useNavigate .

Para acceder a queryString, RRDv6 introdujo un nuevo useSearchParams .

URL dada "/somepath?someQueryParam=123"

 import { useSearchParams } from 'react-router-dom'; ... const [searchParams, setSearchParams] = useSearchParams(); const someQueryParam = searchParams.get("someQueryParam"); // 123

Pregunta adicional

Editar: Por cierto, no soy tan bueno en el enrutador y actualmente estoy convirtiendo un código de v5. Me preguntaba qué debería devolver la palabra clave en v5. ¿El camino en el que estoy actualmente?

location.search es una cadena, por lo que puede procesar la cadena manualmente o crear un objeto URLSearchParams .

Consulte la demostración de parámetros de consulta RRDv5

Crean un useQueryHook personalizado:

 function useQuery() { const { search } = useLocation(); return React.useMemo(() => new URLSearchParams(search), [search]); }

luego acceda a los parámetros de consulta con nombre con el getter:

 let query = useQuery(); ... const name = query.get("name");