Javascript 产品类别的useParams

我是React JS的新手，我正在尝试按产品类别调用产品列表。这应该在导航栏上完成，但我无法解决。我不知道是否可以在useParams中使用多个参数，以及如何使用它。如果有人能帮我，我将不胜感激。下面是代码

这是ItemDetailContainer，我从中调用每个ItemDetail：

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import Aimara from "../../Aimara";
import ItemDetail from "../../Components/ItemDetail/ItemDetail";

const showProduct = (varietalId) => {
  return new Promise((result) =>
    result(Aimara.find((product) => product.title === varietalId))
  );
};
const ItemDetailContainer = () => {      
    const [varietals, setVarietals] = useState([]);
    const { varietalId } = useParams([]);
    console.log(varietalId);
    useEffect(() => {
      showProduct(varietalId).then((product) => {
        setVarietals(product);
      });
    }, [varietalId]);
  
    return <ItemDetail key={varietals.id} varietals={varietals} />;           
};  

export default ItemDetailContainer;

从“react”导入{useffect，useState}；
从“react router dom”导入{useParams}；
从“../../Aimara”导入Aimara；
从“../../Components/ItemDetail/ItemDetail”导入ItemDetail；
const showProduct=（varietalId）=>{
返回新承诺（（结果）=>
结果（Aimara.find（（product）=>product.title==varietalId））
);
};
const ItemDetailContainer=（）=>{
常数[varietals，setVarietals]=useState（[]）；
const{varietalId}=useParams（[]）；
控制台日志（varietalId）；
useffect（（）=>{
showProduct（varietalId）。然后（（产品）=>{
品种（产品）；
});
}，[varietalId]）；
返回；
};  
导出默认ItemDetailContainer；

这是导航栏：

import React from "react";
import { Navbar as NavbarBootstrap, Nav } from "react-bootstrap";
import { Link, NavLink } from "react-router-dom";
import CartWidgetComponet from "../CartWidget/CartWidget";
import LogoComponent from "../Logo/LogoComponent";


const NavBar = () => (
  <>
    <NavbarBootstrap bg="light" variant="light">        
        <Link to="/">
            <NavbarBootstrap.Brand className="mx-4"><LogoComponent/> Global Bridge</NavbarBootstrap.Brand>
        </Link>
        <Nav className="ml-auto">
            <Link to="/">
                <Nav className="mx-3">Global Bridge</Nav>
            </Link>
            <Link to="/AimaraRedWines">
                <Nav className="mx-3">Aimara Red Wines</Nav>
            </Link>
            <Link to="/AimaraWhiteWines">
                <Nav className="mx-3">Aimara White Wines</Nav>
            </Link>
            <Link to="/Contact">
                <Nav className="mx-3">Contact</Nav>
            </Link>
        </Nav>
        <NavLink to="/Cart"><CartWidgetComponet /></NavLink>
    </NavbarBootstrap>
  </>
);

export default NavBar;

从“React”导入React；
从“react bootstrap”导入{Navbar作为NavbarBootstrap，Nav}；
从“react router dom”导入{Link，NavLink}；
从“./CartWidget/CartWidget”导入CartWidgetComponet；
从“./Logo/logomponent”导入logomponent；
常量导航栏=（）=>(
全球桥梁
全球桥梁
艾马拉红葡萄酒
艾马拉白葡萄酒
接触
);
导出默认导航栏；

这是ItemDetail，项目的详细信息：

import { Container } from "react-bootstrap";
import Item from "../Item/Item";
import ItemCountComponent from "../ItemCount";

const ItemDetail = ({ varietals }) => {
    return (    
        <>
            <br />
            <Container className="py-5 px-5">
                    <Item varietals={varietals} />
                    <div className="ml-4 mr-3">
                        <div className="font-italic text-center">{varietals.description}</div>
                        <ItemCountComponent className="d-flex justify-content-center" stock={5} initial={1} />                                 
                    </div>
            </Container>
        </>
    )
};


export default ItemDetail;

从“react bootstrap”导入{Container}；
从“./项目/项目”导入项目；
从“./ItemCount”导入ItemCountComponent；
const ItemDetail=（{varietals}）=>{
报税表（


{varietals.description}
)
};
导出默认项目详细信息；

这是项目

import { Card, Container } from "react-bootstrap";
import "./Style.scss";

const Item = ({ varietals }) => {
    return (
    <>
        <Container>
            <Card>
                <Card.Img variant="top" src={varietals.pictureUrl} />
                <Card.Body>
                    <Card.Title>{varietals.title}</Card.Title>
                    <Card.Text>
                      ${varietals.price}
                    </Card.Text>
                </Card.Body>
                </Card>        
        </Container>
    </>
    )
};


export default Item;

从“react bootstrap”导入{Card，Container}；
导入“/Style.scss”；
常量项=（{varietals}）=>{
返回(
{varietals.title}
${varietals.price}
)
};
导出默认项；

针对带有一个路由参数的问题

看起来你一定有这样的路线定义

<Route path="/:varietalId" component={SomeComponent} />

用于多个路由参数

假设我们要提取多个参数，如

<Route path=":varietalName/:varietalId" component={SomeComponent} />

---

你必须在某个地方定义你的路线。你可以把它贴出来，让你的帖子更清晰。另外，请明确说明使用useParams想要实现什么？谢谢@shivamragnar，但是，我如何将该道具传递到导航栏？我已经更新了上面的代码。我希望能够从导航栏中按类别调用产品。嘿@JoaquinPalacios你能再解释一下，你想要实现什么？那么我从你的评论中了解到了什么。您不必将任何道具传递给导航栏。你只需要像现在一样提供链接。您想要的URL参数可以使用useParams（）简单地获取。您好@shivamragnar幸运的是，我解决了这个问题。谢谢你的帮助和时间。嘿@JoaquinPalacios祝贺你解决了这个问题。将答案标记为已接受，以便人们可以从中受益。

<Route path=":varietalName/:varietalId" component={SomeComponent} />

  let { varietalName, varietalId } = useParams();