messing with nav links

ecom-web/src/components/Header/header-cart.jsx

 import React, { Component } from 'react'
 import './header.css';
 
+import { NavLink} from 'react-router-dom'
+import Nav from 'react-bootstrap/Nav'
+
 export default class HeaderCart extends Component {
     constructor(props) {
         super(props)
@@ -10,7 +13,7 @@ export default class HeaderCart extends Component {
     render() {
         return (
             <div>
-                Cart
+                <Nav.Link href="/cart">Cart</Nav.Link>
             </div>
         )
     }

ecom-web/src/components/Header/header.js

@@ -29,8 +29,8 @@ export default class Header extends Component {
                     <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                     <Navbar.Collapse id="responsive-navbar-nav">
                         <Nav className="mr-auto">
-                            <Nav.Link to="/product-market" id="nav-home-link">Home</Nav.Link>
-                            <Nav.Link to="/product-market">Products</Nav.Link>
+                            <Nav.Link href="/product-market" id="nav-home-link">Home</Nav.Link>
+                            <Nav.Link href="/product-market">Products</Nav.Link>
                         </Nav>
                         <Nav className="ms-auto">
                             {!this.props.user?.currentUser ? 

ecom-web/src/components/shopping-cart/shopping-cart.js

@@ -19,7 +19,7 @@ export default function ShoppingCart() {
     const productsFromRefs = []
 
     cartRefs.map((cartRef) => {
-      productsFromRefs.push(({product: allProducts.filter((currProduct) => (currProduct.sku === cartRef.productRef.sku))[0], quantity: cartRef.quantity}))
+      productsFromRefs.push(({ product: allProducts.filter((currProduct) => (currProduct.sku === cartRef.productRef.sku))[0], quantity: cartRef.quantity }))
     })
 
     setCartItems(productsFromRefs)