useParams for category products - css

Question

I am new with React JS and I am trying to be able to call the list of products by their category. That should be done from the Navbar, but I could not sort it out. If there is someone to help me with it I would much appreciate it. Below is the code.
this is my route page
const Pages = () => {
return (
<Routes>
<Route path="/" element={<Home />}/>
<Route path="/products/:_type" element={<Products />}/>
</Routes>
)
}
this one is for fetching products
let params = useParams()
const[shopProducts,setShopProducts] = useState([])
const[ifFetch,setIfFetch] = useState(false)
const getProducts = async (name) =>{
const query = `*[_type ==${name}]`
await client.fetch(query).then((res) => {
//console.log(res)
setShopProducts(res)
console.log(shopProducts)
setIfFetch(true)
})
}
useEffect(()=>{
getProducts(params.type)
},[params.type,ifFetch])
and this is my link from navbar
<NavLink to={'/products/men'}>Men</NavLink>

Answer 1

Route page
const Pages = () => {
return (
<Routes>
<Route path="/" element={<Home />}/>
<Route path="products/:type" element={<Products />}/>
</Routes>
)
}
And get route parameter like this way -
let { type } = useParams()
const[shopProducts,setShopProducts] = useState([])
const[ifFetch,setIfFetch] = useState(false)
useEffect(()=> {
client.fetch(`https://ho4y55im.api.sanity.io/v2021-10-21/data/production?query=${type}`)
.then((res)=> {
setShopProducts(res)
setIfFetch(true)
}
},[type, ifFetch])