reactjs - 是否可以通过 react-router 使用 material-ui 按钮导航?
问题描述
我有一个使用 Material-UI 设计的网络应用程序,正如您在下面看到的,我正在使用按钮导航来浏览我的基本登录页面组件。
<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 的按钮导航一起使用?material-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
组件)
这适用于任何继承自ButtonBase
.
https://material-ui.com/api/bottom-navigation-action/
遗产
ButtonBase 组件的属性也可用。您可以利用此行为来定位嵌套组件。
https://material-ui.com/api/button-base/
道具
component
- 用于根节点的组件。使用 DOM 元素或组件的字符串。
推荐阅读
- python - 向 Pandas 数据框中添加新列值的长度大于索引长度的新列
- python - 中止训练时如何获取 Keras 历史对象?
- android - Gradle 构建:服务器返回 HTTP 响应代码:使用工件的 URL https 的 401
- .net-core - Azure 函数 HttpTrigger,不在属性中使用 HttpMethods 类
- html - 如何使用 nodemailer 从上传按钮发送附件
- oxwall - 如何在 oxwall 中检索用户角色?
- powerbi - 根据 Power BI 中的其他列筛选值
- eclipse - java.lang.NoClassDefFoundError: org/openqa/selenium/remote/service/DriverService$Builder
- python-3.x - 如何为日期格式设置输入掩码或设置验证器到 Qlineedit?
- r - R在调查数据中使用gather()进行多个循环