Material-ui: O botão envolvido com o link do roteador react não funciona no Safari

@mariusk Você poderia me dizer como você adicionou o componente Link do roteador

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

Percebo que se eu adicionar linkButton={true} , preciso adicionar a rota ao elemento href , mas o roteador Link da reação gera a tag âncora por padrão.

Aqui está o código real:

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

Sem o manipulador onTouchTap, ele funciona no Chrome, mas não no Safari. Com o manipulador explícito (que novamente chama transitionTo(...) react-router, ele também funciona no safari.

Isso pode ser porque FlatButton gera um elemento <button /> e eu acredito que <Link /> gera um elemento <a /> . Então você terá:

<a><button /></a>

Uma solução que posso pensar é alterar o botão avançado para aceitar um elemento prop que permitirá aos usuários personalizar o elemento do contêiner. Então, você será capaz de fazer:

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

Você tem razão; O botão dentro de um elemento a não é um HTML5 válido. Outra solução possível seria ter os estilos de botão disponíveis para a elementos (além de button ) e, em seguida, estilizá-lo simples com className .

Na verdade, com o # 846, você será capaz de fazer:

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

Acabei de testar o # 846. Ele quebrou o estilo (o texto do botão é branco sobre branco) e o link não está ativo (não funciona). Aqui está o código real que testei:

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

Além do problema de cor (que foi causado pelo meu próprio estilo), e do fato de que o link ainda não funciona, há também um problema de foco. Ao passar o mouse sobre o link a incorporado, apenas as partes do link são destacadas, não o botão inteiro.

@mariusk Você deve ser capaz de fazer isso agora:

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

Isso parece e funciona perfeito, obrigado, ótimo trabalho!

Quando eu mudo para este, estou recebendo avisos de vazamento de memória EventEmitter. Não tenho certeza se são os manipuladores de cliques em <Link> ou em <EnhancedButton> que não estão sendo removidos corretamente? Talvez <Link> não esteja sendo desmontado corretamente?

Parece que agora está funcionando mesmo sem linkButton={true} , certo? Quando o botão tem Link para containerElement ele é transformado em um elemento <a> vez de <button> ?

@ hai-cea legal, thx!
@antoinerousseau sim, transforme-se em <a> , quebrou o estilo único ... o texto originalmente definido como text-align: center mudou para a esquerda ... como agora é um elemento <a>

containerElement não está documentado :(

Vejo que esta configuração (por exemplo, RaisedButton largura containerElement={<Link to="/register>} tem problema de CSS. O efeito ondulação não está disparando corretamente. Na verdade, está disparando, mas com tanto atraso que quase não consigo ver (até que toque mais no botão). Estou usando a v0.15.4.

Alguma dica de como acelerá-lo?

Não funciona mais

Aviso: proposta desconhecida linkButton na tag.

@wzup basta remover o linkButton={true}

@wzup Se você escrever seu código assim sem o prop linkButton, ele deve funcionar.

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

@ hai-cea,
Olá,

como posso fazer uma função na página de login [dizer função modal] para pop-up, no código acima, uma vez que navega após o clique do botão

Desculpe o solavanco, mas o seguinte ainda gera um aviso em 0,17:

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

Gera o seguinte:

Aviso: proposta desconhecida onTouchTap na tag. Para obter detalhes, consulte https://fb.me/react-unknown-prop

Eu tive o mesmo problema, então criei um componente reutilizável que funciona para mim.

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>
        );
    }
}

Uso:

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

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

@MatthewEdge # 4670 deve resolver o problema

No Material UI v1.0.0-alpha20 , isso não parece funcionar para mim:
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

Oi,

mesmo problema, usando v1.0.0-alpha21 para prototipagem e obteve a mensagem containerElement is unknown. Portanto, a propriedade parece abandonada e acabei com esta solução:

<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 com a versão mais recente v1.0.0-beta.3 você deve ser capaz de fazer:

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

E então use o invólucro como o componente

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

Obrigado pela indicação @HiroAgustin; isso parece funcionar em v1.0.0-beta.3 :

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

Em 1.0.0-beta.6 usando a solução de @HiroAgustin e @hubgit estou recebendo um aviso:

Aviso: Material-UI: forneça uma classe para a propriedade do componente.
A lógica de foco do teclado precisa de uma referência para funcionar corretamente.

Alguma sugestão?

@mht para mim funcionou quando removi as chaves:

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

@limakayo Mas o que você faz quando deseja criar o link dinamicamente?

@mht boa pergunta, eu testei com as chaves agora e funcionou, não sei porque

alguém sabe como adicionar umno título do AppBar?, preciso poder adicionar um link no título para 'Agência de viagens'

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

podemos apenas usar assim com v1-beta

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

Eu acho que material-ui pertence ainda a estruturas de interface do usuário de estilo antigo, onde você não pode encontrar todos os estilos de botão que você encontra, ou simples são muitos estilos, se alguém precisar personalizar em um nível baixo como eu, finalmente estou feliz com 'styled-components' não precisam mais de css, saas, etc, apenas reagem a componentes puros .. você perdeu muito tempo, dias, horas, tentando descobrir como ou onde mudar algo se há um bug, ou esperar o lançamento futuro ..

@palaniichukdmytro obrigado pela solução, mas quebra a ondulação do estilo em BottomNavigationAction

Isso funcionou para mim em um botão material-ui:
`` `
importar React de 'react'
botão de importação de '@ material-ui / core / Button'
importar {Link} de 'react-router-dom'

const SubmitButton = () =>
type = "enviar"
largura completa
variante = "contido"
color = "primário"
componente = {Link}
para = "/ formulário"
>
Enviar formulário

Tentei renderizar o botão com Link com o código abaixo, mas nada está sendo renderizado na visualização:

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

De que outra forma posso passar adereços para a próxima rota usando o material-ui?

componente = {() => (
to = {{
nome do caminho: 'hello-there',
Estado: {
Olá: 'OLÁ!',
},
}}
/>
)}
tamanho = "pequeno"
variante = "contido"
color = "primário"
fullWidth = {true}
>
OLÁ BOTÃO

Eu tenho a mesma pergunta - já resolveu isso?