web-dev-qa-db-fra.com

Est-il possible d'utiliser la navigation par bouton Material UI avec Reactor-Routeur?

J'ai une application Web que j'avais conçue avec Material-UI et j'utilise la navigation par bouton pour naviguer dans mon composant de page de destination de base.

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

J'essaie d'utiliser React-Router avec ces composants de navigation prédéfinis mais cela ne fonctionne pas, existe-t-il un moyen possible d'utiliser Router avec la navigation par bouton de l'interface utilisateur matérielle? Article de navigation dans Button-Material UI ButtonNavigation API

reactjsreact-routermaterial-uireact-router-dom
10
El.

Oui c'est possible. Vous devez utiliser le prop 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>

(le prop to est pour React composant Link du routeur))

Cela fonctionne avec tout composant Material-UI qui hérite de ButtonBase.

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

Héritage

Les propriétés du composant ButtonBase sont également disponibles. Vous pouvez profiter de ce comportement pour cibler des composants imbriqués.

https://material-ui.com/api/button-base/

Accessoires

component - Le composant utilisé pour le nœud racine. Soit une chaîne pour utiliser un élément DOM ou un composant.

18
thirtydot