是否可以在react-router中使用material-ui按钮导航？

小编典典

是否可以在react-router中使用material-ui按钮导航？

reactjs

我有一个使用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中的按钮导航文章

阅读 393

2020-07-22

共1个答案

小编典典

是的，有可能。您需要使用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元素或组件的字符串。

2020-07-22