Material-ui: El botón envuelto con Link de react-router no funciona en Safari

@mariusk ¿Podría decirme cómo agregó el componente Link de react-router al componente Button? Por ejemplo, si hago algo como lo siguiente, no funciona.

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

Me doy cuenta de que si agrego linkButton={true} , necesito agregar la ruta al elemento href , pero el enlace del enrutador de reacción genera la etiqueta de anclaje de forma predeterminada.

Aquí está el código real:

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

Sin el controlador onTouchTap, funciona en Chrome pero no en Safari. Con el manejador explícito (que nuevamente llama a transitionTo(...) react-router, también funciona en safari.

Esto podría deberse a que FlatButton genera un elemento <button /> y creo que <Link /> genera un elemento <a /> . Entonces tendrás:

<a><button /></a>

Una solución en la que puedo pensar es cambiar el botón mejorado para aceptar un elemento de apoyo que permitirá a los usuarios personalizar el elemento contenedor. Entonces podrás hacer:

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

Tienes razón; el botón dentro de un elemento a no es válido html5. Otra posible solución sería tener los estilos de botones disponibles para los elementos a (además de button ), y luego aplicarle un estilo simple con className .

En realidad, con el n. ° 846, podrá hacer:

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

Acabo de probar el # 846. Rompió el estilo (el texto del botón es blanco sobre blanco) y el enlace no está activo (no funciona). Aquí está el código real que probé:

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

Además del problema de color (que fue causado por mi propio estilo), y el hecho de que el enlace aún no funciona, también hay un problema de enfoque. Al pasar el cursor sobre el enlace a incrustado, solo se resaltan las partes del enlace, no todo el botón.

@mariusk Deberías poder hacer esto ahora:

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

Eso se ve y funciona perfecto, gracias, ¡gran trabajo!

Cuando cambio a esto, recibo advertencias de fuga de memoria EventEmitter. No estoy seguro de si son los controladores de clic en <Link> o los de <EnhancedButton> que no se eliminan correctamente. ¿Quizás <Link> no se está desmontando correctamente?

Parece que ahora funciona incluso sin linkButton={true} , ¿verdad? Cuando el botón tiene Link por containerElement , se convierte en un elemento <a> lugar de <button> ?

@ hai-cea agradable, gracias!
@antoinerousseau sí, <a> , rompió el estilo único ... el texto originalmente establecido en text-align: center cambió a la izquierda ... ya que ahora es un elemento <a>

containerElement no está documentado :(

Veo que esta configuración (por ejemplo, RaisedButton width containerElement={<Link to="/register>} tiene un problema de CSS. El efecto dominó no se está disparando correctamente, en realidad se está disparando pero con tanta demora que casi no puedo verlo (hasta que toque más ese botón) Estoy usando v0.15.4.

¿Alguna pista de cómo acelerarlo?

Ya no funciona

Advertencia: accesorio desconocido linkButton en la etiqueta.

@wzup simplemente elimine el linkButton={true}

@wzup Si escribe su código de esta manera sin el accesorio linkButton, debería funcionar.

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

@ hai-cea,
Hola,

¿Cómo puedo hacer que una función en la página de inicio de sesión [diga función modal] aparezca en el código anterior una vez que navega después de hacer clic en el botón?

Disculpe el golpe, pero lo siguiente aún genera una advertencia en 0.17:

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

Genera lo siguiente:

Advertencia: accesorio desconocido onTouchTap en la etiqueta. Para obtener más información, consulte https://fb.me/react-unknown-prop

Tuve el mismo problema, así que creé un componente reutilizable que me funciona.

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 debería resolver el problema

En Material UI v1.0.0-alpha20 , esto no parece funcionar para mí:
<Button color="contrast" containerElement={<Link to="/login" />} linkButton={true} > Login </Button>

Hola,

mismo problema, usando v1.0.0-alpha21 para la creación de prototipos y obtuvo el mensaje containerElement es desconocido. Entonces la propiedad parece caer y terminé con esta solución:

<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 con la última versión v1.0.0-beta.3 debería poder hacer:

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

Y luego usa la envoltura como componente

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

Gracias por el puntero @HiroAgustin; esto parece funcionar en v1.0.0-beta.3 :

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

En 1.0.0-beta.6 usando la solución de @HiroAgustin y @hubgit , recibo una advertencia:

Advertencia: Material-UI: proporcione una clase a la propiedad del componente.
La lógica de enfoque del teclado necesita una referencia para funcionar correctamente.

¿Alguna sugerencia?

@mht para mí funcionó cuando quité las llaves:

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

@limakayo ¿Pero qué haces cuando te gustaría crear dinámicamente el enlace?

@mht buena pregunta, probé con las llaves ahora y funcionó, no sé por qué

cualquiera sabe cómo agregar unen el título de AppBar ?, necesito poder agregar un enlace en el título de 'Agencia de viajes'

<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 usarlo así con v1-beta

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

Creo que material-ui todavía pertenece a marcos de interfaz de usuario de estilo antiguo, donde no puedes encontrar todos los estilos de botones que encuentras, o simples son demasiados estilos, si alguien necesita personalizar en un nivel bajo como yo, finalmente estoy contento con 'styled-components' no es necesario más sobre css, saas, etc., solo reacciona componentes puros ... perdiste mucho tiempo, días, horas, tratando de averiguar cómo o dónde cambiar algo o si hay un error, o esperar el versión futura ..

@palaniichukdmytro gracias por la solución, pero rompe el estilo ondulado en BottomNavigationAction

Esto funcionó para mí en un botón material-ui:
''
importar Reaccionar desde 'reaccionar'
Importar botón de '@ material-ui / core / Button'
importar {Link} desde 'react-router-dom'

const SubmitButton = () =>
type = "enviar"
fullWidth
variante = "contenido"
color = "primario"
componente = {Enlace}
to = "/ formulario"
>
Enviar formulario

Intenté renderizar el botón con Link con el siguiente código, pero no se renderiza nada en la vista:

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

¿De qué otra manera puedo pasar accesorios a la siguiente ruta usando material-ui?

componente = {() => (
to = {{
nombre de ruta: 'hola',
estado: {
hola: '¡HOLA ALLÍ!',
},
}}
/>
)}
tamaño = "pequeño"
variante = "contenido"
color = "primario"
fullWidth = {true}
>
BOTÓN HOLA

Tengo la misma pregunta: ¿alguna vez resolví esto?