How do I enable on click functionality on a material-ui Icon?

Question

import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'
function App(){
     return (
         <div>
             ShoppingCartIcon></ShoppingCartIcon>
         </div>
      )
}

I want to open an another page when I click on the icon. How do I do it?

Answer 1

First of all, you need to setup a Router in your project. For more information, look into: https://reactrouter.com/web/guides/quick-start . After you are done seting up your routes, you can navigate through the app in many different ways. One of them would be by using the useHistory hook:

import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'

function App(){
     const history = useHistory();

     return (
         <div>
             <ShoppingCartIcon onClick={() => history.push("/page")} />
         </div>
      )
}

Answer 2

Or you can use Link from react router to redirect to another route.

<Link to="/about"><Icon /></Link>