gpt4 book ai didi

reactjs - 是否可以将material-ui按钮导航与react-router一起使用?

转载 作者:行者123 更新时间:2023-12-03 13:11:30 25 4
gpt4 key购买 nike

我有一个使用 Material-UI 设计的 Web 应用程序,正如您在下面看到的,我使用按钮导航来浏览我的基本着陆页组件。

<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 的 Material-UI 组件。

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.

关于reactjs - 是否可以将material-ui按钮导航与react-router一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51232245/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com