产品类别的useParams

Question

我是React JS的新手，我正在尝试根据产品类别来调用产品列表。这应该在导航栏中完成，但我无法对其进行排序。我不知道是否可以在useParams中使用多个参数，也不知道如何使用它。如果有人能帮我解决这个问题，我将非常感激。下面是代码。

这是我调用每个ItemDetail的ItemDetailContainer：

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;

这是导航栏：

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;

这是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;

这就是那个项目

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;

Answer 1

使用一个路由参数为您的问题提供

看起来你一定是定义了一个路由，就像这样。

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

现在，当您使用useParams获取varietalId时，您可以执行以下操作

  let { varietalId } = useParams();

多路由参数的

假设我们有多个参数要提取，如下所示

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

现在我们只需要做像这样的事情

  let { varietalName, varietalId } = useParams();