カテゴリ製品の useParams

React JS は初めてで、カテゴリ別に製品のリストを呼び出せるようにしようとしています。それは Navbar から行う必要がありますが、整理できませんでした。それを手伝ってくれる人がいれば、とても感謝しています。以下はコードです。

これは私のルートページです

const Pages = () => {

  戻る （
      <ルート パス="/" 要素={}/>

        <Route path="/products/:_type" element={}/>
  )

}
これは商品を取得するためのものです
let params = useParams()
  const[shopProducts,setShopProducts] = useState([])

  const[ifFetch,setIfFetch] = useState(false)

  const getProducts = async (名前) =>{
    const query = `*[_type ==${name}]`

    await client.fetch(query).then((res) => {
      //console.log(res)

      setShopProducts(res)

      console.log(shopProducts)

      setIfFetch(真)

    }))
    }
useEffect(()=>{

  getProducts(params.type)

},[params.type,ifFetch])
そして、これは navbar からの私のリンクです
 男性



ルート ページ
const Pages = () => {

  戻る （
      <ルート パス="/" 要素={}/>

        <Route path="products/:type" element={}/>
  )

}
この方法でルート パラメータを取得します -
let { type } = useParams()
const[shopProducts,setShopProducts] = useState([])

const[ifFetch,setIfFetch] = useState(false)
useEffect(async ()=> {
  // ここにフェッチ ロジックを記述します
},[タイプ, ifFetch])