Header.js

import React from "react";
import PersonIcon from "@material-ui/icons/Person";
import ForumIcon from "@material-ui/icons/Forum";
import "./Header.css";
import IconButton from "@material-ui/core/IconButton";
import {Link, useHistory} from "react-router-dom";
import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
function Header({backButton}){
    const history = useHistory();
    return (
        <div className="header">
            {backButton ? (<IconButton onClick={() => history.replace(backButton)}>
            <ArrowBackIosIcon className="header__icon" fontSize="large" />
            </IconButton>):
            (<IconButton>
                <PersonIcon className="header__icon" fontSize="large" />
                </IconButton>)}
            
            <Link to="/">
            <img src = {"\Ensemble.png"} alt = "Logo"/>
            </Link>  
            <Link to="/chat">  <IconButton>
            <ForumIcon  className="header__icon" fontSize="large"/>
            </IconButton>
            </Link>  
          

        </div>
    );
}

export default Header;