我有一个使用Material-UI设计的Web应用程序,如下所示,我正在使用Button导航来浏览基本的着陆页组件。
<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导航一起使用?材质-UI ButtonNavigation API中的按钮导航文章
是的,有可能。您需要使用component
道具:
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
组件)
这适用于任何继承自的Material-UI组件ButtonBase
。
https://material-ui.com/api/bottom-navigation-action/
遗产
ButtonBase组件的属性也可用。您可以利用此行为来定位嵌套组件。
https://material-ui.com/api/button-base/
道具
component
-用于根节点的组件。使用DOM元素或组件的字符串。