是否可以在 react-router 中使用 material-ui 按钮导航? [英] Is it possible to use material-ui button navigation with react-router?
问题描述
我有一个使用 Material-UI 设计的网络应用,正如您在下面看到的,我使用按钮导航来浏览我的基本登录页面组件.
<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}/></底部导航>
我已经尝试将 React-Router 与这些预定义导航组件一起使用,但没有奏效,有没有可能的方法将 Router 与 Material-UI 的 Button 导航一起使用?Material-UI中的按钮导航文章ButtonNavigation API
是的,这是可能的.您需要使用 component
道具:
import { Link } from 'react-router-dom';从@material-ui/core/BottomNavigation"导入底部导航;从'@material-ui/core/BottomNavigationAction'导入BottomNavigationAction;//....<BottomNavigation value={value} onChange={this.handleChange}><底部导航操作组件={链接}到=/信号"标签=信号"值=信号"icon={<ShowChart/>}className={classes.content}/></底部导航>
(to
属性用于 React Router 的 Link
组件)
这适用于任何继承自 ButtonBase
的 Material-UI 组件.
https://material-ui.com/api/bottom-navigation-action/
<块引用>继承
ButtonBase 组件的属性也是可用的.您可以利用此行为来定位嵌套组件.
https://material-ui.com/api/button-base/
<块引用>道具
component
- 用于根节点的组件.使用 DOM 元素或组件的字符串.
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>
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-UI ButtonNavigation API
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>
(the to
prop is for React Router's Link
component)
This works with any Material-UI component that inherits from ButtonBase
.
https://material-ui.com/api/bottom-navigation-action/
Inheritance
The properties of the ButtonBase component are also available. You can take advantage of this behavior to target nested components.
https://material-ui.com/api/button-base/
Props
component
- The component used for the root node. Either a string to use a DOM element or a component.
这篇关于是否可以在 react-router 中使用 material-ui 按钮导航?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!