是否可以在react-router中使用material-ui按钮导航? [英] Is it possible to use material-ui button navigation with react-router?

问题描述

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

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>

我尝试将React-Router与这些预先定义的导航组件一起使用，但是那没用，有没有可能将Router与Material-UI的Button导航一起使用? material-UI中的按钮导航文章 ButtonNavigation API

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

推荐答案

是的，有可能.您需要使用component道具:

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>

(to道具用于React Router的Link组件)

(the to prop is for React Router's Link component)

这适用于任何从ButtonBase继承的Material-UI组件.

This works with any Material-UI component that inherits from ButtonBase.

https://material-ui.com/api/bottom-navigation-action /

继承

ButtonBase组件的属性也是 可用的.您可以利用此行为来定位嵌套 组件.

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/

道具

component-用于根节点的组件.使用DOM元素或组件的字符串.

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屋！