0

我可以创建多页，但是在每个购物页面中复制导航栏感觉是多余的，而且我希望当我单击添加到购物车（从购物页面）时，每个页面都可以从导航栏中共享一个购物车功能。

我可以做到这一点，但它变成了单页反应。

Menmain、Women、Kids 是导入到导航栏页面的购物页面。使用道具，我可以获得导航栏的功能，以在每个购物页面上启用购物车功能。但是通过这样做..我只得到一页。

简而言之，如何使我的导航栏相互链接并充当所有人的购物车……就像父母一样。

截至目前，这些代码在单页反应中..

Index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import NavbarShop from "./NavbarShop";
import Home from "./Home";
import Menmain from './Components/MenShop/menmain'
import Women from './Components/WomenShop/Women'
import Kids from './Components/KidsShop/Kids'
import Footer from "./Footer";

ReactDOM.render(
<Router>
 <NavbarShop/>
 <Routes>
<Route path="/" element={<Home />} />
<Route path="/menmain" element={<Menmain />} />
<Route path="/Women" element={<Women />} />
<Route path="/Kids"  element={<Kids />} />
</Routes>
<Footer/>
</Router>,

document.getElementById("root")
);

NavbarShop.jsx

import "./App.css";
import Mainlogo from "./Components/Assets/urban-fit-logo.png"
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, Nav, Container} from 'react-bootstrap';
import Offcanvas from 'react-bootstrap/Offcanvas'
import Basket from './Components/Basket';
import { useState } from 'react';
import Menmain from './Components/MenShop/menmain'
import Data from './Components/Data/data';
import Data2 from './Components/Data/data2';
import Women from './Components/WomenShop/Women';
import Data3 from './Components/Data/data3';
import Kids from './Components/KidsShop/Kids';
import Home from "./Home";

export default function NavbarShop() {

const { product } = Data
const { Fproducts } = Data2;
const { Kproduct } = Data3;

const [ cartItems, setCartItems] = useState([]);
 const countCartItems  = cartItems.length
 const onAdd = (product) => {
   const exist = cartItems.find((x) => x.id === product.id);
   if (exist) {
     setCartItems(
       cartItems.map((x) =>
         x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
       )
     );
   } else {
     setCartItems([...cartItems, { ...product, qty: 1 }]);
   }
 };
 const onRemove = (product) => {
   const exist = cartItems.find((x) => x.id === product.id);
   if (exist.qty === 1) {
     setCartItems(cartItems.filter((x) => x.id !== product.id));
   } else {
     setCartItems(
       cartItems.map((x) =>
         x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
       )
     );
   }
 };


const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);


return (
 <div className='app'> 

 <div className='navbar-container'>
   <Navbar collapseOnSelect expand="lg" bg="white" text="black" fixed="top" className="navbar-bootstrap">
 <Container>
 <Navbar.Brand href="#home" className="navLogo">
 <div>
 <a href="/"><img src={Mainlogo} alt="main-logo" className='main-logo'></img></a>
 </div>
 </Navbar.Brand>
 
 <Navbar.Toggle aria-controls="responsive-navbar-nav" />
 <Navbar.Collapse id="responsive-navbar-nav">
   <Nav className="me-auto">
   <Nav.Link href="/" className="navlink">Home</Nav.Link>
   <Nav.Link href="Shopmen" className="navlink">Shop Men</Nav.Link>
    <Nav.Link href="Shopwomen" className="navlink">Shop Women</Nav.Link>
    <Nav.Link href="Shopkids" className="navlink">Shop Kids</Nav.Link>
   </Nav>
   <Nav>
     <Nav.Link className="nav-a" onClick={handleShow} id="badge">   
         Cart{' '}
         {countCartItems ? (
           <p className="badge">{countCartItems}</p>
         ) : (
           ''
         )}        
       </Nav.Link>
   </Nav>
 </Navbar.Collapse>
 </Container>
 </Navbar>
 
 <Offcanvas show={show} onHide={handleClose}  placement='end' className="cart-container">
       <Offcanvas.Header closeButton className="cartHeader">
         <Offcanvas.Title className="cartName">CART</Offcanvas.Title>
       </Offcanvas.Header>
       <Offcanvas.Body>
       <Basket 
         cartItems={cartItems}
         onAdd={onAdd}
         onRemove={onRemove}
       ></Basket>
 
       </Offcanvas.Body>
     </Offcanvas>

   </div>
   <div className='men-clothing'>
     <Home/>
  <Menmain product= { product } onAdd={onAdd} onRemove={onRemove}></Menmain>
  <Women product= { Fproducts } onAdd={onAdd} onRemove={onRemove}></Women>
  <Kids product= { Kproduct } onAdd={onAdd} onRemove={onRemove}></Kids>
  </div>

  </div>

);
     }
4

0 回答 0