用材料-UI图标导航

Question

如何使用React router Dom的Material-UI Icon来做导航？

我试过了，但这行不通。

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

如果是Buttons，我可以做这样的事情： component={Link} 和 to="/vehicles" 但我想不通如何直接从图标上进行导航。

Answer 1

你可以使用 使用历史 钩子。

从'react-router-dom'导入 { useHistory }。

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

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

有了它，你可以建立一个自定义组件。

Answer 2

你可以使用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

        )

}

希望对你有所帮助

Answer 3

你试过这种方式吗？Material-UI现在支持Icon Button组件。

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

这里有一个工作实例。https:/codesandbox.iosmaterial-demo-ifgg2。

我发现很奇怪，我无法从图标包中找到你的确切图标。我用一个工作样本图标替换了那个图标。然而，这可以帮助你识别并作为我的答案的证据。

参考这个。https:/material-ui.comcomponentsbuttons#icon-buttons.

以上就是小编为大家带来的关于 "中国人的生活 "的相关内容，希望对大家有所帮助!