Material-ui: Le bouton enveloppé avec le lien de react-router ne fonctionne pas dans Safari

@mariusk Pourriez-vous s'il vous plaît me dire comment avez-vous ajouté le composant Link de react-router au composant Button. Par exemple, si je fais quelque chose comme ce qui suit, cela ne fonctionne pas.

let editLink = <Link to="editTopic"/>;
<IconButton
    linkButton={true}
    onTouchTap={editLink}
    tooltip="Edit forum">
    <i className="material-icons">edit</i>
</IconButton>

Je remarque que si j'ajoute linkButton={true} j'ai besoin d'ajouter la route à l'élément href , mais réagir router Link génère la balise d'ancrage par défaut.

Voici le vrai code :

 <Link to="/login"><FlatButton onTouchTap={this.clickHandler}>{l.l('no', 'Sign in')}</FlatButton></Link>

Sans le gestionnaire onTouchTap, cela fonctionne dans Chrome mais pas dans Safari. Avec le gestionnaire explicite (qui appelle à nouveau le transitionTo(...) react-router, cela fonctionne également dans safari.

Cela peut être dû au fait que FlatButton génère un élément <button /> et je pense que <Link /> génère un élément <a /> . Vous aurez donc :

<a><button /></a>

Une solution à laquelle je peux penser consiste à modifier Enhanced-button pour accepter un élément prop qui permettra aux utilisateurs de personnaliser l'élément conteneur. Vous pourrez donc faire :

<FlatButton containerElement={<Link to="/login"/>} />

Tu as raison; le bouton à l'intérieur d'un élément a n'est pas valide html5. Une autre solution possible serait d'avoir les styles de boutons disponibles pour les éléments a (en plus de button ), puis de les styliser simplement avec className .

En fait avec #846, vous pourrez faire :

<FlatButton>
  <Link to="/login/" />
</FlatButton>

Je viens de tester le #846. Cela a cassé le style (le texte du bouton est blanc sur blanc) et le lien n'est pas actif (ne fonctionne pas). Voici le code réel que j'ai testé:

<FlatButton><Link to="/login">{l.l('no', 'Sign in')}</Link></FlatButton>

En plus du problème de couleur (qui a été causé par mon propre style) et du fait que le lien ne fonctionne toujours pas, il y a aussi un problème de focus. Lorsque vous survolez le lien a intégré, seules les parties du lien sont mises en surbrillance, pas l'intégralité du bouton.

@mariusk Vous devriez pouvoir le faire maintenant :

<FlatButton
  containerElement={<Link to="/login" />}
  linkButton={true}
  label={l.l('no', 'Sign in')}/>

Cela a l'air et fonctionne parfaitement, merci, excellent travail!

Lorsque je passe à cela, je reçois des avertissements de fuite de mémoire EventEmitter. Je ne sais pas si ce sont les gestionnaires de clics sur <Link> ou ceux sur <EnhancedButton> qui ne sont pas supprimés correctement ? Peut-être que <Link> n'est pas correctement démonté ?

On dirait que cela fonctionne maintenant même sans linkButton={true} , n'est-ce pas ? Lorsque le bouton a Link pour containerElement il est transformé en un élément <a> plutôt qu'un <button> ?

@hai-cea sympa, merci !
@antoinerousseau oui, se transformer en <a> , a brisé le style ... un texte initialement réglé à text-align: center qui a changé dans son left..as maintenant <a> élément

containerElement n'est pas documenté :(

Je vois que cette configuration (par exemple, RaisedButton width containerElement={<Link to="/register>} a un problème CSS. L'effet d'entraînement ne se déclenche pas correctement, en fait, il se déclenche mais avec tellement de retard que je ne peux presque pas le voir (jusqu'à ce que je appuyez plus longtemps sur ce bouton). J'utilise v0.15.4.

Une astuce pour l'accélérer ?

Ne fonctionne plus

Avertissement : accessoire inconnu linkButton sur la balise.

@wzup supprime simplement le linkButton={true}

@wzup Si vous écrivez votre code comme celui-ci sans la prop linkButton, cela devrait fonctionner.

<FlatButton
  containerElement={<Link to="/login" />}
/>

@hai-cea ,
Bonjour,

comment puis-je créer une fonction sur la page de connexion [dire fonction modale] pour s'afficher, dans le code ci-dessus une fois qu'il navigue après un clic sur le bouton

Excusez le bump mais ce qui suit génère toujours un avertissement sur 0.17 :

<RaisedButton
      label="Sign In"
      containerElement={<Link to="/login" />}
/>

Génère les éléments suivants :

Avertissement : accessoire inconnu onTouchTap sur la balise. Pour plus de détails, voir https://fb.me/react-unknown-prop

J'ai eu le même problème, j'ai donc créé un composant réutilisable qui fonctionne pour moi.

import React from 'react';
import {Component, PropTypes} from 'react';
import FlatButton from 'material-ui/FlatButton';

export default class FlatLinkButton extends Component {

    static propTypes = {
        ...FlatButton.propTypes,
        to: PropTypes.string.isRequired,
        link: PropTypes.func.isRequired,
        label: PropTypes.node.isRequired,
    };

    render() {
        const style = Object.assign({
            color: 'white',
            marginTop: '7px'
        }, this.props.style);

        const props = {
            ...this.props,
            style,
        };

        delete props.to;
        delete props.link;

        const Link = this.props.link;

        return (
            <Link to={this.props.to}>
                <FlatButton {...props}/>
            </Link>
        );
    }
}

Usage:

import {Link} from 'react-router';
import FlatLinkButton from './FlatLinkButton';

<FlatLinkButton to="/login" link={Link} label="Login"/>

@MatthewEdge #4670 devrait résoudre le problème

Dans Material UI v1.0.0-alpha20 , cela ne semble pas fonctionner pour moi :
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

Salut,

même problème, en utilisant v1.0.0-alpha21 pour le prototypage et a obtenu le message containerElement est inconnu. La propriété semble donc abandonnée et je me suis retrouvé avec cette solution :

<Button raised dense color="primary" onClick={() => this.props.history.push('/project/4711')}>
  <i className="fa fa-search fa-on-button" aria-hidden="true" />Search
</Button>

@HerrVoennchen avec la dernière version v1.0.0-beta.3 vous devriez pouvoir faire :

const LinkWrapper = ({ ...props }) => (
  <Link {...props} />
)

Et puis utilisez le wrapper comme composant

<Button to={`/project/${id}`} component={LinkWrapper}>Go</Button>

Merci pour le pointeur @HiroAgustin; cela semble fonctionner dans v1.0.0-beta.3 :

<Button
  color="primary"
  to={`/projects/${project.id}`}
  component={props => <Link {...props}/>}
>View</Button>

Dans 1.0.0-beta.6 utilisant @HiroAgustin et la solution de @hubgit , je reçois un avertissement :

Avertissement : Material-UI : veuillez fournir une classe à la propriété du composant.
La logique de focus clavier a besoin d'une référence pour fonctionner correctement.

Aucune suggestion?

@mht pour moi, cela a fonctionné lorsque j'ai retiré les accolades :

<Button component={Link} to="/customers"> Customers </Button>

@limakayo Mais que faites-vous lorsque vous souhaitez créer dynamiquement le lien ?

@mht bonne question, j'ai testé avec les accolades maintenant et ça a fonctionné, je ne sais pas pourquoi

quelqu'un sait comment ajouter undans le titre d'AppBar ?, je dois pouvoir ajouter un lien sur le titre pour 'Agence de voyages'

<AppBar title={"Travel Agency"} iconElementRight={ <div> <Link to="/customers" className="navbar"><FlatButton label="Customers" /></Link> <Link to="/tours" className="navbar"><FlatButton label="Tours" /></Link> </div> } />

nous pouvons simplement utiliser comme ça avec v1-beta

<Button
  component={({...props}) => <Link to='/path' {...props} />}
>Path</Button>

Je pense que material-ui appartient toujours aux frameworks d'interface utilisateur de style ancien, où vous ne pouvez pas trouver tous les styles de boutons que vous trouvez, ou les styles simples sont trop de styles, si quelqu'un a besoin de personnaliser à un niveau bas comme moi, finalement je suis content de 'styled-components' pas besoin de plus sur css, saas, etc., réagissez simplement à des composants purs. future version ..

@palaniichukdmytro merci pour la solution, mais cela casse le style d'ondulation dans BottomNavigationAction

Cela a fonctionné pour moi sur un bouton material-ui :
```
importer React à partir de 'react'
importer le bouton de '@material-ui/core/Button'
importer { Link } depuis 'react-router-dom'

const Bouton Soumettre = () =>
type="soumettre"
pleine largeur
variant="contenu"
color="primaire"
composant={Lien}
to="/form"
>
Soumettre le formulaire

J'ai essayé de rendre le bouton avec Link avec le code ci-dessous, mais rien n'est rendu sur la vue :

<Button
  component={() => (
    <Link
      to={{
        pathname: 'hello-there',
        state: {
          hello: 'HELLO THERE!',
        },
      }}
    />
  )}
  size="small"
  variant="contained"
  color="primary"
  fullWidth={true}
>
  HELLO BUTTON
</Button>

Sinon, comment puis-je transmettre des accessoires à la prochaine route à l'aide de material-ui ?

composant={() => (
à={{
chemin d'accès : 'bonjour',
Etat: {
bonjour : 'BONJOUR !',
},
}}
/>
)}
taille="petit"
variant="contenu"
color="primaire"
fullWidth={true}
>
BOUTON BONJOUR

J'ai la même question - jamais résoudre cela?