使用 Material-UI 圖標進行導航

Question

如何使用 Material-UI 圖標使用 React 路由器 Dom 進行導航？

我試過這個，但這不起作用：

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

如果是按鈕，我可以執行類似component={Link}和to="/vehicles"的操作，但我不知道如何直接從圖標導航。

Answer 1

你試過這種方法嗎？ Material-UI 現在支持 Icon Button 組件，

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

這是一個工作示例： https://codesandbox.io/s/material-demo-ifgg2

我發現我無法從圖標包中找到您的確切圖標，這很奇怪。 我用一個工作示例圖標替換了那個圖標。 但是，這可以幫助您識別並用作我回答的證據。

參考這個： https://material-ui.com/components/buttons/#icon-buttons

我希望這能幫到您！

Answer 2

你可以使用useHistory鈎子：

從 'react-router-dom' 導入 { useHistory }；

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

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

有了它，您可以構建自定義組件。

Answer 3

您可以使用 react-router-dom 的 useHistory 鈎子或從道具在單擊圖標時推送路徑。

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

        )

}

我希望這有幫助