Material-ui: [MenuItem] Tautan dalam item Menu

Dibuat pada 6 Jan 2015  ·  43Komentar  ·  Sumber: mui-org/material-ui

Hai, Saya sedang melihat implementasi item menu saat ini dan memperhatikan bahwa tidak ada tautan yang sebenarnya (artinya, tag html <a> ). Akibatnya, misalnya, bahkan di bilah navigasi tidak ada tautan yang sebenarnya, dan transisi ke halaman lain dikelola melalui peristiwa onclick.

Saya pikir memiliki tautan akan menjadi peningkatan, terutama mengingat halaman yang dirender di sisi server.

Apakah menurut Anda ini masuk akal, atau apakah Anda memiliki alasan khusus untuk tidak pergi ke arah ini?

v0.x
Sumber
picture 0x0ece
👍2

Komentar yang paling membantu

Gunakan prop containerElement !

melihat:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  } />
picture DaxChen pada 29 Des 2015
👍46 🎉15 👎2

Semua 43 komentar

Aku bertanya-tanya tentang ini juga. Saya menggunakan rendering sisi server dalam aplikasi saya, ini adalah sesuatu yang harus diperhatikan.

WRidder picture WRidder pada 6 Jan 2015

Menggunakan elemen jangkar dengan atribut href juga akan meningkatkan aksesibilitas dan memungkinkan orang untuk menggunakan perilaku browser yang biasa mereka gunakan (misalnya -Klik untuk membuka di tab baru).

tschaub picture tschaub pada 7 Jan 2015

+1

ZMYaro picture ZMYaro pada 12 Jan 2015

+1

ButuzGOL picture ButuzGOL pada 25 Feb 2015

+1

batazor picture batazor pada 8 Apr 2015

+1

mewben picture mewben pada 28 Apr 2015

+1

batazor picture batazor pada 1 Mei 2015

+1

nikhildaga picture nikhildaga pada 27 Agu 2015

+1

rhythnic picture rhythnic pada 3 Nov 2015

@ecesena apakah menurut Anda ini masih menjadi masalah dengan komponen MenuItem ? Lihat di sini . MenuItem s dapat dikelilingi oleh <a>..</a> , bukan?

shaurya947 picture shaurya947 pada 11 Nov 2015
👍2

ini mungkin dengan apa yang disarankan @shaurya947 .

alitaheri picture alitaheri pada 8 Des 2015

Saya mencoba menggunakan MenuItems di LeftNav saya seperti ini:

        let menuItems = (
            <div>
                <MenuItem primaryText="Doors"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} /></a>
                <MenuItem primaryText="Load"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Notes"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Alerts"          leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Admin"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
            </div>
        );

        return (
            <LeftNav
                ref="leftNav"
                docked={false}
                onChange={this._onLeftNavChange}
            >
                {menuItems}
            </LeftNav>
        )

Membungkus <a> sekitar tag <MenuItem> memberikan peringatan validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See MainLayout > a > ... > MenuItem > ListItem > EnhancedButton > a"

Jika Anda melakukan inspeksi Bereaksi pada output, Anda mendapatkan yang berikut.

<a href="/">
    <MenuItem..>
        <ListItem..>
            <div>
                <EnhancedButton..>
                    <a>
                        <TouchRipple ..>
                    </a>
                </EnhancedButton>
            </div>
        </ListItem>
    </MenuItem>
</a>

yang memiliki elemen <a> bersarang adalah ofensif.

<MenuItems> menghasilkan elemen <a> dalam deklarasi Button. Prop apa yang digunakan dari MenuItem untuk mengisi atribut href dalam <EnhancedButton> dihasilkan?

Menggunakan objek MenuItem sebagai penyangga untuk LeftNav membuat tautan berfungsi, tetapi saya belum dapat menemukan cara menambahkan Ikon kiri/kanan dengan cara ini.

yaitu:

let menuItems = [
         { route: '/load_areas/'+ this.state.area + '/doors', text: 'Doors' },
         { route: '/load_areas/'+ this.state.area + '/trailer_loads', text: 'Load' },
         { route: 'notes', text: 'Notes' },
         { route: 'alerts', text: 'Alerts' },
         { route: 'admin', text: 'Admin' }
         ];

<LeftNav
                ref="leftNav"
                docked={false}
                menuItems={menuItems}
                onChange={this._onLeftNavChange}
            />
inkorange picture inkorange pada 16 Des 2015

ini adalah masalah terpisah, silakan buka satu, sehingga kami dapat memberi label dan menambahkannya ke tonggak sejarah, tnx :grin:

alitaheri picture alitaheri pada 16 Des 2015

Gunakan prop containerElement !

melihat:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  } />
DaxChen picture DaxChen pada 29 Des 2015
👍46 🎉15 👎2

Sekarang prop linkButton dari EnhancedButton tidak digunakan lagi. LinkButton tidak lagi diperlukan saat properti href disediakan. Ini akan dihapus dengan v0.16.0.

Sebagai contoh:

<MenuItem primaryText="Primary Text" href="/your/link" />
nodejh picture nodejh pada 12 Sep 2016
👍6 😕2

href memuat ulang halaman. bagaimana jika saya ingin menggunakan router reaksi?

cezarneaga picture cezarneaga pada 2 Nov 2016
👍3

@cezarneaga coba href="#/your/link"

Oduig picture Oduig pada 5 Nov 2016 
<MenuItem
  containerElement={<Link to="/profile" />}
.../>

dokumentasi menyebutkan Anda harus memasukkan juga linkButton . jika Anda menghapus ini, ini berfungsi tanpa kesalahan.

cezarneaga picture cezarneaga pada 5 Nov 2016
👍13

@DaxChen Saya melihat jawaban Anda yang diperbarui stackoverflow untuk Des 2016 (Sangat Terbaru haha) dan saya bertanya-tanya apakah Anda tahu apakah ini berfungsi untuk MenuItem di dalam Laci? Saya mencoba yang berikut di bawah ini dan sama sekali tidak dapat membuat Tautan berfungsi dengan MenuItem karena containerElement tampaknya tidak melakukan apa-apa.

<Drawer
  docked={false}
  width={300}
  onRequestChange={this.closeDrawer}
  open={this.state.open}>
  <AppBar title="Title"
 />
  <MenuItem primaryText="home" containerElement={<Link to="/home" />} />
</Drawer>
Faolain picture Faolain pada 25 Des 2016

containerElement berfungsi tetapi tidak didokumentasikan, jadi saya kira utas ini harus berfungsi sebagai dokumentasi resmi untuk saat ini. Terima kasih!

kgregory picture kgregory pada 9 Feb 2017

Hai @Faolain !

Benar-benar minta maaf atas jawaban yang terlambat ...
Saya mencoba kode Anda pada aplikasi yang bersih dengan create-react-app , tetapi semuanya tampak berfungsi dengan baik ?!
Mungkin Anda mengonfigurasi react-router berbeda, atau apakah versinya berbeda?

Bagaimanapun, inilah Contoh Repo , dan Demo Langsung Di Sini .

Jika Anda masih tidak dapat menemukan penyebab masalah Anda, dapatkah Anda memberikan contoh repo untuk direproduksi?

DaxChen picture DaxChen pada 12 Feb 2017

Tidak ada solusi di atas yang berfungsi di Safari dan iOS. Jadi, inilah yang saya lakukan sebagai solusi untuk react-router

          <MenuItem
            onTouchTap={() => {
              this._yourMethod()
              browserHistory.push('/howItWorks')
            }}
            primaryText="Menu Link"
          />
janzenz picture janzenz pada 14 Apr 2017

@janzenz apakah contoh ini di sini tidak berfungsi di browser Anda?

Saya mencobanya di Safari di macOS dan Safari di iOS dan semuanya berfungsi. Apakah ini tidak bekerja untuk Anda?

Meskipun solusi Anda berhasil, ini dapat menyebabkan SEO yang buruk dan Anda akan kehilangan beberapa perilaku asli seperti pratinjau tautan dan klik opsi untuk membuka di tab baru.

DaxChen picture DaxChen pada 16 Apr 2017

@DaxChen terima kasih atas wawasannya. Saya tidak yakin apakah masalah saya terkait dengan tautan pertama Anda. Saya sudah mencoba yang ke-2 tetapi setelah saya menambahkan prop onTouchTap <Link /> tidak berfungsi lagi.

janzenz picture janzenz pada 16 Apr 2017

@janzenz Saya telah menambahkan prop onTouchTap dalam contoh saya sebelumnya dan masih berfungsi.
Tidak tahu apakah pengaturan Anda berbeda di suatu tempat atau sesuatu ...
Anda dapat memeriksa kode yang diperbarui dan melihat apakah itu berfungsi untuk Anda?

DaxChen picture DaxChen pada 16 Apr 2017

@DaxChen Saya melihat Anda menggunakan material-ui pada versi ~0.16.0 . Sudahkah Anda mencoba ~0.17.0 dan melihat apakah itu masih tidak menjadi masalah?

janzenz picture janzenz pada 17 Apr 2017

@janzenz Saya menggunakan versi yang lebih lama, baru saja memperbarui ke 0.17.4 dan masih berfungsi!

DaxChen picture DaxChen pada 17 Apr 2017
🎉1

Sentuh! Mungkin pengaturan saya saat itu. Terima kasih telah mengonfirmasi bahwa @DaxChen saya akan kembali ke utas ini jika saya telah menemukan masalah sebenarnya.

janzenz picture janzenz pada 17 Apr 2017
👍1

@DaxChen , saya mencoba contoh yang Anda berikan kepada saya, tetapi gagal

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `EnhancedButton`.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:74)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:140)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:320)
    at Object._renderSubtreeIntoContainer (ReactMount.js:401)
    at Object.render (ReactMount.js:422)
    at Object.<anonymous> (index.js:36)
    at __webpack_require__ (bootstrap e3e2367…:555)
    at fn (bootstrap e3e2367…:86)
    at Object.<anonymous> (bootstrap e3e2367…:578)
    at __webpack_require__ (bootstrap e3e2367…:555)
    at bootstrap e3e2367…:578
    at bootstrap e3e2367…:578

Kode saya tersedia di https://github.com/hhimanshu/spicyveggie/tree/cards (cabang cards )

Saya tidak yakin apa yang berbeda, tetapi itu tidak berfungsi

@janzenz
Saya juga mencoba browserHistory.push('/howItWorks') dan mengimpor import browserHistory from 'react-router-dom' , tetapi mendapat undefuned .

@Oduig ,
Saya mencoba #/your/link , tetapi tidak membawa saya kemana-mana
Saya mencoba /your/link , tetapi memuat ulang halaman itu dan saya kehilangan Drawer dari Material-UI

Tak satu pun dari hal-hal ini bekerja untuk saya. Kode saya tersedia di https://github.com/hhimanshu/spicyveggie/tree/cards (cabang cards ), komit khusus adalah https://github.com/hhimanshu/spicyveggie/commit/844b7b7cddf9102995cd2680a783df3b6ef48537 , Bisakah seseorang tolong bantu?

hhimanshu picture hhimanshu pada 24 Apr 2017

@hhimanshu ubah baris ini menjadi

import { Link } from 'react-router-dom'

info lebih lanjut tentang MDN

DaxChen picture DaxChen pada 24 Apr 2017

@DaxChen , terima kasih. Itu saja. Namun, tidak ketika halaman saya dimuat dengan {<Link to="/menu"/>} , itu memuat seluruh halaman dan Drawer hilang.

screen shot 2017-04-24 at 1 54 23 pm

hhimanshu picture hhimanshu pada 24 Apr 2017

@hhimanshu itu karena Anda hanya menggunakan komponen Menu di \menu route , jadi App tidak akan dirender.

Sarangkan Menu dan Summary di dalam App atau beberapa komponen tata letak, dan berikan turunan masing-masing.

Anda dapat menggunakan react-devtools untuk memeriksa hierarki komponen yang dirender dan statusnya!

Ini tidak terkait dengan material-ui, silakan baca lebih lanjut di tutorial/dokumen react-router.

DaxChen picture DaxChen pada 24 Apr 2017

Terima kasih @DaxChen , saya menyelesaikannya sebagai https://github.com/hhimanshu/spicyveggie/blob/master/src/index.js#L20

hhimanshu picture hhimanshu pada 24 Apr 2017

+1

IveTou picture IveTou pada 9 Des 2017
😕1

Solusi untuk tautan yang DIDANGANI & TIDAK DITANGANI oleh React Router.

Jika tautan target ditangani oleh React Router

MenuItemLink.js

import React from 'react';
import { MenuItem } from 'material-ui/Menu';
import { Route } from 'react-router-dom';

class MenuItemLink extends React.Component {
  render() {
    const {
      to, also,
      ...rest
    } = this.props;

    return (
      <Route
        render={({ history, location }) => (
          <MenuItem
            onClick={() => {
              history.push(to);
              if (typeof also === 'function') {
                also();
              }
            }}
            {...rest}
          />
        )}
      />
    );
  }
}
MenuItemLink.muiName = 'MenuItem';
export default MenuItemLink;

Kode sampel:

import MenuItemLink from './MenuItemLink';

<Menu ... >
        <MenuItemLink to="/users"
          also={this.handleRequestClose}>Users</MenuItemLink>
</Menu>

Jika tautan target TIDAK ditangani oleh React Router, yaitu: permintaan diteruskan ke server API atau apa pun

fungsi onClick:

    function facebookLoginRedirect () {
      if (window) window.location.href = "/api/auth/facebook"
      return true;
    }

Kode sampel:

<MenuItem onClick={ facebookLoginRedirect }>Login with Facebook</MenuItem>
xemasiv picture xemasiv pada 10 Des 2017
👍9

Saya datang untuk menambahkan ini, kalau-kalau ada orang lain yang menemukannya juga.

Pada v3.4, Anda dapat mencapai ini seperti:

import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component={Link} to="/your-path">...</MenuItem>
goyney picture goyney pada 8 Nov 2018
👍25 🎉3 ❤2

Satu-satunya solusi yang berhasil bagi saya tanpa merusak tata letak Menu adalah:
```javascript


Pemberitahuan



Profil


eladlevy picture eladlevy pada 1 Mar 2019
👍3 👎2

Satu-satunya solusi yang berhasil bagi saya tanpa merusak tata letak Menu adalah:

<MenuList>
  <Link to='/your-path' style={{ textDecoration: 'none' }}>
    <MenuItem>
      Notifications
     </MenuItem>
  </Link>
  <Link to='/your-path' style={{ textDecoration: 'none' }}>
    <MenuItem>
      Profile
     </MenuItem>
  </Link>
</MenuList>

@eladlevy Ini akan berakhir dengan HTML semantik yang buruk.

<ul>
  <a><li/></a>
  <a><li/></a>
</ul>
NaderIkladious picture NaderIkladious pada 10 Jun 2019
👍3

Meninggalkan ini di sini jika itu membantu siapa pun (menjalankan v3.9.0). Saya membutuhkan <Select> untuk bertindak sebagai menu react-router-dom <Link> s. Setiap tautan terkait dengan setelan bahasa, sehingga tarik-turun akan menampilkan nilai bahasa saat ini dari parameter kueri.

<Select value={currentLanguage}>
  {languages.map(language => (
    <ListItem
      button
      component={btnProps => (
        <Link
          to={ `/things?lang=${ language }` }
          {...btnProps as any}
        />
      )}
      value={language}
      key={language}
    >
      {language}
    </ListItem>
  ))}
</Select>

Ini adalah solusi terbersih yang dapat saya temukan yang membutuhkan casting TypeScript minimal dan mempertahankan visual yang konsisten dengan Material UI.

MarkLeMerise picture MarkLeMerise pada 20 Jun 2019

@goyney punya solusinya, terima kasih

NielsDom picture NielsDom pada 27 Agu 2019

Saya datang untuk menambahkan ini, kalau-kalau ada orang lain yang menemukannya juga.

Pada v3.4, Anda dapat mencapai ini seperti:

import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component={Link} to="/your-path">...</MenuItem>

Solusi yang berfungsi dan bersih, terima kasih ❤️

MelMacaluso picture MelMacaluso pada 6 Sep 2019
👍1

Untuk tautan eksternal, Anda ingin menggunakan component="a" , tetapi juga mengelilingi MenuItem di <li> :

<MenuList>
    <li>
        <MenuItem
            component="a"
            href="https://google.com"
            target="_blank"
        >Google</MenuItem>
    </li>
</MenuList>

Ini menghasilkan HTML berikut:

<ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
    <li>
        <a class="[...]" tabindex="-1" aria-disabled="false" role="menuitem" href="https://google.com" target="_blank">Google</a>
    </li>
</ul>
jtreminio picture jtreminio pada 23 Okt 2019

Misalkan saya memiliki menu popup dan menggunakan

import { Tautan } dari 'react-router-dom';
impor MenuItem dari '@material-ui/core/MenuItem';

\\

Tautan akan memunculkan halaman / jalur Anda, bagaimana cara menutup menu popup?

stliang picture stliang pada 28 Feb 2020
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

sys13 picture sys13  ·  3Komentar
iamzhouyi picture iamzhouyi  ·  3Komentar
mb-copart picture mb-copart  ·  3Komentar
newoga picture newoga  ·  3Komentar
ghost picture ghost  ·  3Komentar