使用 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

        )

}

我希望这有帮助