javascript - examples - semantic ui templates react

Interfaz de usuario semántica(React): cómo utilizar los componentes de enlace en los elementos de Menu.List

Question

Estoy tratando de obtener una lista de menú de ui (reaccionar) semántica, que debería estar trabajando con el enrutador de reacción, lo que significa que me gustaría usar el componente de Link del react router de react router

Si uso esto ...

<Menu.Item name=''profile''>
<Icon name=''user'' />
My profile
</Menu.Item>

... me da el resultado:

<a class="item">
<i aria-hidden="true" class="user icon"></i>
My profile
</a>

Pero me gustaría conseguir algo como

<Link to=''profile''>
<i aria-hidden="true" class="user icon"></i>
My profile
</Link>

Este no funciona, ya que la sintaxis es incorrecta:

<Menu.Item name=''profile'' as={ <Link to=''profile'' /> }>
<Icon name=''user'' />
My profile
</Menu.Item>

Answer 1

Necesitas utilizar el augmentation de SUIR:

<Menu.Item as={ Link } name=''profile'' to=''profile''>
<Icon name=''user'' />
My profile
</Menu.Item>

Answer 2

Utilice browserHistory.push en browserHistory.push lugar; También fue provisto por react-router como una alternativa de Link pero sin marcado:

import {browserHistory} from ''react-router'';
redirect(to) {
browserHistory.push({
pathname: to
});
}
//......
<Menu.Item name="profile" onClick={this.redirect(''/profile'')}
<Icon name=''user'' />
My profile
</Menu.Item>

Si desea obtener /profile de accesorios de name , cambie la línea por:

<Menu.Item name="profile" onClick={(event, itemProps) => this.redirect(itemProps.name)}

Y si es así, <Menu onItemClick={...} > es mejor que <Menu.item onClick={...} >