CODEWITHSUNDEEP
javascriptreactjstypescriptmaterial-uireact-navigation
user12541823
user12541823

Reputation:

Navigation with Material-UI Icons

How can I use a Material-UI Icon to do navigation using React router Dom?

I tried this but this doesn't work:

 <NavigateBeforeIcon path="/vehicles"></NavigateBeforeIcon>

In case of Buttons, I could do something like component={Link} and to="/vehicles" but I can't figure out how to navigate directly from the icon.

Upvotes: 0

Views: 2400

Answers (3)

Nadun
Nadun

Reputation: 7853

Did you try this way? Material-UI now supports Icon Button components,

<IconButton aria-label="vehicles" component={Link} to="/vehicles">
  <NavigateBeforeIcon />
</IconButton>

Here is a working example: https://codesandbox.io/s/material-demo-ifgg2

I found it weird that I couldn't find your exact icon from the Icon pack. I replaced that icon with a working sample icon. However, This could help you to identify and use as proof for my answer.

Refer to this: https://material-ui.com/components/buttons/#icon-buttons

I hope this will help you!

Upvotes: 3

Suraj Auwal
Suraj Auwal

Reputation: 318

You can use react-router-dom's useHistory hook or from props to push a path whenever the icon is clicked. 

const Sidepane = () => {

// Assuming that you've imported it from the react-router-dom package

const history = useHistory()

const onClick = () => history.push("/vehicles") 

return (
        <NavigateBeforeIcon onClick={onClick}>
           Go to vehicles 
        </NavigateBeforeIcon

        )

}

I hope this helps

Upvotes: 0

Gh05d
Gh05d

Reputation: 8972

You can use the useHistory Hook:

import { useHistory } from 'react-router-dom';

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

  return <NavigateBeforeIcon onClick={() => history.push('/profile')}
          ></NavigateBeforeIcon>
}

With it you can build a custom component.

Upvotes: 0

Related Questions