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();

产品类别的 useParams

1 个答案: