AFP 80 fixed header nav links bug

ecom-web/package.json

@@ -16,6 +16,7 @@
     "react-google-login": "^5.2.2",
     "react-modal": "^3.13.1",
     "react-redux": "^7.2.4",
+    "react-router-bootstrap": "^0.25.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.0",

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)
         this.state = {}
     }
-
     render() {
         return (
             <div>
-                Cart
+                <Nav.Link href="/cart">Cart</Nav.Link>
             </div>
         )
     }

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

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
 import NavDropdown from 'react-bootstrap/NavDropdown'
+import {LinkContainer} from 'react-router-bootstrap'
 import {NavLink} from 'react-router-dom'
 import Session from '../session/session-container'
 import HeaderCart from './header-cart-container'
@@ -29,14 +30,20 @@ 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>
+                        <LinkContainer to="/product-market" >
+                            <Nav.Link id="nav-home-link">Home</Nav.Link>
+                        </LinkContainer>
+                        <LinkContainer to="/product-market" >
+                            <Nav.Link id="nav-home-link">Products</Nav.Link>
+                        </LinkContainer>
                         </Nav>
                         <Nav className="ms-auto">
                             {!this.props.user?.currentUser ? 
                                 <Navbar.Text className="nav-bar-text">Hello Guest</Navbar.Text> :
                                 <NavDropdown className="nav-bar-text" title={"Hello "+userName} id="collasible-nav-dropdown">
-                                    <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item>
+                                    <LinkContainer to="/orders" >
+                                        <NavDropdown.Item >Order History</NavDropdown.Item>
+                                    </LinkContainer>
                                 </NavDropdown>
                             }
                             <Session className="nav-bar-text"/>