0
169
VistasuseParams devuelve indefinido
Ver edición 1
Estoy tratando de usar ganchos useParams() pero sigue devolviendo un valor indefinido.
esta es la url
http://localhost:3000/carrito/?id=61a00439d03ef6261c127997&qty=1&size=36x48
import { useParams } from "react-router-dom"; export default function CartScreen(props) { let { qty, id, size } = useParams(); console.log("slug : " + qty); console.log("id : " + id); console.log("size : " + size); ... } 
En realidad, no sé por qué console.logs tantas veces, pero de todos modos, no está definido y no sé por qué.
Edición 1:
const router = useRouter(); const productId = router.query.id; const qty = router.query.qty; const size = router.query.size; console.log("productId : " + productId); console.log("qty : " + qty); console.log("size : " + size); devoluciones 
3 Respuestas
Responde la pregunta0
Su URL no está en el formato que necesita la biblioteca useParams. Si esto no le ayuda, verifique si definió las rutas correctamente.
Echa un vistazo a la respuesta en este post:
0
use URLSearchParams verifique esto: ¿Cómo obtener una cadena de consulta usando React?
export default function CartScreen(props) { const query = new URLSearchParams(window.location.search); const qty = query.get('qty'); const id = query.get('id'); const size = query.get('size'); console.log("slug : " + qty); console.log("id : " + id); console.log("size : " + size); ... }o use el gancho useQuery () verifique esto: https://v5.reactrouter.com/web/example/query-parameters
import { useQuery } from "react-router-dom"; export default function CartScreen(props) { const query = useQuery(); const qty = query.get('qty'); const id = query.get('id'); const size = query.get('size'); console.log("slug : " + qty); console.log("id : " + id); console.log("size : " + size); ... } e intente cambiar http://localhost:3000/cart/?id=xxx&qty=xxx&size=xxx a http://localhost:3000/cart?id=xxx&qty=xxx&size=xxx es la mejor práctica y más legible.
0
Permítame responder con un método simple de vanilla js en caso de que prefiera no usar una biblioteca.
function urlParamsObj(source) { /* function returns an object with url parameters URL sample: www.test.com?var1=value1&var2=value2 USE: console.log(URLparamsObj().var2) --> output: value2 You can use it for a url-like string also: urlParamsObj("www.ok.uk?val_a=2&b=3").val_a*/ var urlStr = source ? source : window.location.search ? window.location.search : "" if (urlStr.indexOf("?") > -1) { // if there are params in URL var param_array = urlStr.substring(urlStr.indexOf("?") + 1).split('&'), theLength = param_array.length, params = {}, i = 0, x; for (; i < theLength; i++) { x = param_array[i].toString().split('='); params[x[0]] = x[1]; } return params; } return {}; } El uso es el mismo: let { qty, id, size } = urlParamsObj();