我有一个使用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道具:
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组件)
to
Link
这适用于任何继承自的Material-UI组件ButtonBase。
ButtonBase
https://material-ui.com/api/bottom-navigation-action/
遗产 ButtonBase组件的属性也可用。您可以利用此行为来定位嵌套组件。
ButtonBase组件的属性也可用。您可以利用此行为来定位嵌套组件。
https://material-ui.com/api/button-base/
道具 component-用于根节点的组件。使用DOM元素或组件的字符串。
component-用于根节点的组件。使用DOM元素或组件的字符串。