Head.js

import React, { useContext } from "react";
import { Navbar, Nav, NavDropdown, Button, Form } from "react-bootstrap";
import { useLocation } from "react-router-dom";
import mano from "./mano.svg";
import AuthContext from "./AuthContext";

function Head(props) {
  const auth = useContext(AuthContext);
  let location = useLocation();

  let adminNav;
  if (auth.role === "admin") {
    adminNav = (
      <NavDropdown title="Admin" id="admin">
        <Nav.Link href="/members">Socias</Nav.Link>
        <Nav.Link href="/topup">Recarga</Nav.Link>
      </NavDropdown>
    );
  }
  return (
    <Navbar bg="light">
      <Navbar.Brand href="/">
        <img
          src={mano}
          width="30"
          height="30"
          className="d-inline-block align-top"
          alt="Garbanzo Negro"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto" activeKey={location.pathname}>
          <Nav.Link href="/products">Productos</Nav.Link>
          <Nav.Link href="/purchase">Comprar</Nav.Link>
          <Nav.Link href="/order/create">Abrir pedido</Nav.Link>
        </Nav>
        {adminNav}
        <Form inline>
          <Button variant="outline-success" onClick={props.onLogout}>
            Salir
          </Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  );
}

export default Head;