web-dev-qa-db-de.com

Semantische Benutzeroberfläche (Reagieren): Verwendung von Link-Komponenten in Menu.List-Elementen

Ich versuche, eine semantische UI-Menüliste (Reagieren) zu erhalten, die mit dem Reagieren-Router funktionieren sollte. Das heißt, ich möchte die Link -Komponente von react router Verwenden.

Wenn ich das benutze ...

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

... es gibt mir das Ergebnis:

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

Aber ich würde gerne etwas bekommen

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

Dieser funktioniert nicht, da die Syntax falsch ist:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>
javascriptreactjsreact-routersemantic-uisemantic-ui-react
22
user3142695

Sie müssen die SUIRs verwenden Augmentation :

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

Verwenden browserHistory.Push stattdessen ; Es wurde auch zur Verfügung gestellt von react-router als Alternative zu Link, jedoch ohne Aufschlag:

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>

Wenn du /profile von name Requisiten, ändern Sie die Zeile durch:

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

Und wenn , <Menu onItemClick={...} > ist besser als <Menu.item onClick={...} >

6
Abdennour TOUMI