问题描述
我有一个使用Material-UI设计的Web应用程序,正如您在下面看到的那样,我正在使用Button导航来浏览基本的着陆页组件.
I have a web app that I'v designed with material-UI and as you can see below I'm using Button navigation for navigating through my basic landing page components.
<div className="footer">
<BottomNavigation value={value} onChange={this.handleChange} className={classes.root}>
<BottomNavigationAction label="signal" value="signal" icon={<ShowChart />} className={classes.content}/>
<BottomNavigationAction label="hotlist" value="hotlist" icon={<HotList />} className={classes.content}/>
<BottomNavigationAction label="analyze" value="analyze" icon={<PieChart />} className={classes.content}/>
<BottomNavigationAction label="learn" value="learn" icon={<LibraryBooks/>} className={classes.content}/>
<BottomNavigationAction label="dashboard" value="dashboard" icon={<PermIdentity/>} className={classes.content}/>
</BottomNavigation>
</div>
我尝试将React-Router与这些预先定义的导航组件一起使用,但是那没用,有没有可能将Router与Material-UI的Button导航一起使用?material-UI中的按钮导航文章 ButtonNavigation API
I've tried to use React-Router with these predefiend navigation component but that didn't work, is there any possible way to use Router with Button navigation of material-UI?Button navigation article in material-UIButtonNavigation API
推荐答案
是的,有可能.您需要使用component
道具:
Yes, it's possible. You need to use the component
prop:
import { Link } from 'react-router-dom';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
// ....
<BottomNavigation value={value} onChange={this.handleChange}>
<BottomNavigationAction
component={Link}
to="/signal"
label="signal"
value="signal"
icon={<ShowChart />}
className={classes.content}
/>
</BottomNavigation>
(to
道具用于React Router的Link
组件)
(the to
prop is for React Router's Link
component)
这适用于任何从ButtonBase
继承的Material-UI组件.
This works with any Material-UI component that inherits from ButtonBase
.
https://material-ui.com/api/bottom-navigation-action /
https://material-ui.com/api/button-base/
这篇关于是否可以在react-router中使用material-ui按钮导航?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!