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

CodePudding user response：

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:

Using the useParams hook in react

CodePudding user response：

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.

CodePudding user response：

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();