使用 Material-UI 图标进行导航

Question

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.

Answer 1

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!

Answer 2

You can use theuseHistory 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.

Answer 3

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