0
171
VisualizaçõesuseParams returns undefined
See edit 1
I am trying to use useParams() hooks but it keeps returning undefined value.
This is the url
http://localhost:3000/cart/?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);
...
}
Actually I don't really know why it console.logs this many time but anyway, it is undefined and I don't know why.
Edit 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);
returns
3 Respostas
Responde à pergunta0
Your url isn't in the format the useParams lib needs it. If this doesn't help you, check if you defined the routes correctly.
Have a look at the answer in this post:
0
use URLSearchParams checkout this: How to get query string using 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);
...
}
or use hook useQuery() checkout this: 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);
...
}
and try change http://localhost:3000/cart/?id=xxx&qty=xxx&size=xxx to http://localhost:3000/cart?id=xxx&qty=xxx&size=xxx is best practice and more readable.
0
Let me answer with a simple vanilla js method in case you prefer not to use a library.
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 {};
}
Usage is just the same: let { qty, id, size } = urlParamsObj();