问未从“React路由器-dom”导出react开关。

EN

// import React from 'react';
// import Products from './components/Products/Products';


 import { commerce} from './lib/commerce';

import {Products,Navbar, Cart} from './components';
import { useState , useEffect} from 'react';
import { BrowserRouter as Router, Switch , Route } from 'react-router-dom';
// import { Cart } from '@chec/commerce.js/features/cart';


const App=()=> {
    
    const [products,setProducts] = useState([]);
    const [cart,setCart] = useState({});

    const fetchProducts = async ()=>{

        const {data} = await commerce.products.list();

        setProducts(data);
    }

    const fetchCart = async () => {

         
         setCart(await commerce.cart.retrieve())
    }


    const handleAddToCart = async (productId, quantity) => {
        const item=await commerce.cart.add(productId,quantity);
        setCart(item.cart);
    }
    useEffect(()=>{

        fetchProducts();
        fetchCart();
    },[]);


    console.log(cart)
   
    // console.log(products);
    return (
        
        <Router>
        <div>
            <Navbar totalItems={cart.total_items}/>
            <Switch>
                <Route exact path="/">
                <Products products={products} onAddtoCart={handleAddToCart}/>
                </Route>
                <Route exact path="/cart">
                <Cart cart={cart}/>
                </Route>
         
          
            </Switch>
        </div>
        </Router>
    );
}

export default App;