Passing Multiple parameters as catch them

I'm trying to pass 'slug' in the URL by adding 'id' and 'type'.

Code:

`/${category.slug}?cid=${category._id}&type=${category.type}`   
 <Route path="/:slug" element={<ProductListPage />} />

URL

http://localhost:3000/Samsung-3whQlbAYpm?cid=61ed050cab3efd275d49efd6&type=store

Problem : However, in the useParam() I received only slug not addition parameters such as 'cid' and 'type'

For example,

let params = useParams();

Its params have only 'slug' value which is 'Samsung-3whQlbAYpm'

How can I get addition value ?

1 answer

  • answered 2022-01-25 09:50 Drew Reese

    The useParams hook only gets you the defined route params from the path part of the URL. If you want to access the queryString then use the useSearchParams hook from react-router-dom.

    const [searchParams] = useSearchParams();
    
    const cid = searchParams.get("cid");
    const type = searchParams.get("type");
    

    If you happen to still be using react-router-dom v5 then use the location object to get the search string to be passed to a URLSearchParams constructor.

    const { search } = useLocation();
    const searchParams = new URLSearchParams(search);
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum