[英]How do I enable on click functionality on a material-ui Icon?
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'
function App(){
return (
<div>
ShoppingCartIcon></ShoppingCartIcon>
</div>
)
}
I want to open an another page when I click on the icon.单击该图标时,我想打开另一个页面。 How do I do it?
我该怎么做?
First of all, you need to setup a Router in your project.首先,您需要在项目中设置一个路由器。 For more information, look into: https://reactrouter.com/web/guides/quick-start .
有关更多信息,请查看: https://reactrouter.com/web/guides/quick-start 。 After you are done seting up your routes, you can navigate through the app in many different ways.
完成路线设置后,您可以通过多种不同方式浏览应用程序。 One of them would be by using the
useHistory
hook:其中之一是使用
useHistory
钩子:
import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'
function App(){
const history = useHistory();
return (
<div>
<ShoppingCartIcon onClick={() => history.push("/page")} />
</div>
)
}
Or you can use Link
from react router to redirect to another route.或者您可以使用来自反应路由器的
Link
重定向到另一个路由。
<Link to="/about"><Icon /></Link>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.