Material-ui: [MenuItem] 메뉴 항목 내의 링크

저도 이게 궁금합니다. 내 응용 프로그램에서 서버 측 렌더링을 사용하고 있습니다. 이것은 조사해야 할 사항입니다.

href 속성이 있는 앵커 요소를 사용하면 접근성이 향상되고 사람들이 익숙한 브라우저 동작을 사용할 수 있습니다(예: 새 탭에서 열려면 ⌘ 클릭).

+1

+1

+1

+1

+1

+1

+1

@ecesena 이것이 여전히 새로운 MenuItem 구성 요소의 문제라고 생각하십니까? 여기를 참조 MenuItem s는 <a>..</a> 로 둘러쌀 수 있습니다. 아니요?

이것은 @shaurya947이 제안한 것으로 가능합니다.

다음과 같이 LeftNav에서 MenuItems 를 사용하려고 합니다.

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

<MenuItem> 태그 주위에 <a> 감싸면 경고 validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See MainLayout > a > ... > MenuItem > ListItem > EnhancedButton > a"

출력에 대해 React 검사를 수행하면 다음을 얻습니다.

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

<a> 요소를 중첩하는 것은 불쾌합니다.

<MenuItems> 는 Button 선언 내에서 <a> 요소를 생성합니다. 생성된 <EnhancedButton> 내에서 href 속성을 채우기 위해 MenuItem 에서 어떤 소품이 사용됩니까?

MenuItem 개체를 LeftNav의 소품으로 사용하면 연결이 작동하지만 이 방법으로 왼쪽/오른쪽 아이콘을 추가하는 방법을 알 수 없었습니다.

즉:

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

이것은 별도의 문제이므로 하나를 열어서 레이블을 지정하고 마일스톤에 추가할 수 있도록 하십시오. tnx :grin:

containerElement 소품을 사용하세요!

보다:
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>
  } />

이제 소품 linkButton 의 EnhancedButton 되지 않습니다. href 속성이 제공되면 LinkButton이 더 이상 필요하지 않습니다. v0.16.0에서 제거됩니다.

예를 들어:

<MenuItem primaryText="Primary Text" href="/your/link" />

href는 페이지를 새로고침합니다. 반응 라우터를 사용하고 싶다면 어떻습니까

@cezarneaga 시도 href="#/your/link"

<MenuItem
  containerElement={<Link to="/profile" />}
.../>

설명서에 linkButton 도 입력해야 한다고 나와 있습니다. 이것을 제거하면 오류 없이 작동합니다.

@DaxChen 2016년 12월(매우 최근)에 대한 stackoverflow 업데이트된 답변을 보았고 이것이 Drawer 내의 MenuItem에 대해 작동하는지 알고 있는지 궁금합니다. 나는 아래에서 다음을 시도하고 있으며 containerElement가 아무 것도 하지 않는 것 같기 때문에 Link가 MenuItem과 함께 작동하도록 할 수 없었습니다.

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

containerElement는 작동하지만 문서화되지 않았으므로 현재로서는 이 스레드가 공식 문서 역할을 해야 할 것 같습니다. 감사 해요!

안녕하세요 @Faolain님 !

답변이 늦어 정말 죄송합니다...
create-react-app 를 사용하여 깨끗한 앱에서 코딩을 시도했지만 모든 것이 제대로 작동하는 것 같았습니까?!
react-router 다르게 구성했거나 버전이 다른가요?

어쨌든, 여기에 예제 Repo 가 있고 여기에 라이브 데모가 있습니다.

여전히 문제의 원인을 찾을 수 없다면 재현할 샘플 리포지토리를 제공할 수 있습니까?

위의 솔루션 중 어느 것도 Safari 및 iOS에서 작동하지 않았습니다. react-router 대한 해결 방법은 다음과 같습니다.

          <MenuItem
            onTouchTap={() => {
              this._yourMethod()
              browserHistory.push('/howItWorks')
            }}
            primaryText="Menu Link"
          />

@janzenz 는 이 예가 귀하의 브라우저에서 작동하지 않습니까?

macOS의 Safari와 iOS의 Safari에서 시도했는데 모두 작동합니다. 이것은 당신을 위해 작동하지 않습니까?

해결 방법이 작동하더라도 SEO가 나빠질 수 있으며 링크 미리보기 및 새 탭에서 열기 옵션 클릭과 같은 일부 기본 동작을 잃게 됩니다.

@DaxChen 통찰력에 감사드립니다. 제 문제가 귀하의 첫 번째 링크와 관련이 있는지 확실하지 않습니다. 나는 이미 두 번째 것을 시도했지만 onTouchTap 소품을 추가하면 <Link /> 더 이상 작동하지 않습니다.

@janzenz 이전 예제에서 onTouchTap 소품 을 추가했는데 여전히 작동합니다.
설정이 어딘가 다른지 모르겠네요... 😢
업데이트된 코드 를 확인하고 작동하는지 확인할 수 있습니까?

@DaxChen material-ui 버전에서 ~0.16.0 . 최신 ~0.17.0 를 시도했지만 여전히 문제가 없는지 확인했습니까?

@janzenz 이전 버전을 사용하고 있었는데 최신 0.17.4 업데이트 했는데 여전히 작동합니다!

터치! 아마 그때 내 설정. @DaxChen 이 실제 문제를 발견하면 이 스레드로 다시 돌아올

@DaxChen , 당신이 나에게 준 예를 시도했지만 실패했습니다.

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

내 코드는 https://github.com/hhimanshu/spicyveggie/tree/cards ( cards 분기)에서 사용할 수 있습니다.

무엇이 다른지 잘 모르겠지만 그냥 작동하지 않습니다

@janzenz
나는 또한 시도 browserHistory.push('/howItWorks') 수입 import browserHistory from 'react-router-dom' 만 가지고 undefuned .

@오두이그 ,
#/your/link 시도했지만 아무데도 데려가지 않습니다
/your/link 시도했지만 페이지를 다시 로드하고 Drawer 에서 Material-UI Drawer 를 잃습니다.

이 중 어느 것도 나를 위해 일하지 않았습니다. 내 코드는 https://github.com/hhimanshu/spicyveggie/tree/cards ( cards 분기)에서 사용할 수 있으며 특정 커밋은 https://github.com/hhimanshu/spicyveggie/commit/844b7b7cddf9102995cd2680a783df3b6ef485입니다 . 누군가 도와주세요?

@hhimanshu 이 줄 을 다음으로 변경합니다.

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

MDN에 대한 추가 정보

@DaxChen , 감사합니다. 그거였다. 그러나 내 페이지가 {<Link to="/menu"/>} 로 로드되는 경우가 아니라 전체 페이지가 로드되고 내 Drawer 는 사라집니다.

@hhimanshu \menu route 에서 Menu 구성 요소만 사용 했기 때문에 App 가 렌더링되지 않습니다.

Menu 및 Summary 를 App 또는 일부 레이아웃 구성 요소 안에 중첩하고 각각의 자식을 전달합니다.

react-devtools를 사용하여 렌더링된 구성 요소 계층 구조와 해당 상태를 확인할 수 있습니다!

이것은 material-ui와 관련이 없습니다. react-router의 tutorials/docs에서 자세히 읽어보세요.

@DaxChen 감사 https://github.com/hhimanshu/spicyveggie/blob/master/src/index.js#L20으로 해결했습니다.

+1

React Router에서 HANDLED 및 NOT HANDLED 링크에 대한 해결 방법.

대상 링크가 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;

샘플 코드:

import MenuItemLink from './MenuItemLink';

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

대상 링크가 React Router에 의해 처리되지 않는 경우, 즉: 요청이 API 서버 또는 무엇이든 전달됩니다.

온클릭 기능:

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

샘플 코드:

<MenuItem onClick={ facebookLoginRedirect }>Login with Facebook</MenuItem>

다른 사람이 우연히 발견한 경우를 대비하여 여기에 추가하려고 합니다.

v3.4에서는 다음과 같이 달성할 수 있습니다.

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

...

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

메뉴 레이아웃을 깨지 않고 나를 위해 일한 유일한 솔루션은 다음과 같습니다.
```자바스크립트


알림



프로필

메뉴 레이아웃을 깨지 않고 나를 위해 일한 유일한 솔루션은 다음과 같습니다.

<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 이것은 빈약한 시맨틱 HTML로 끝날 것입니다.

<ul>
  <a><li/></a>
  <a><li/></a>
</ul>

누군가에게 도움이 될 수 있도록 여기에 남겨둡니다(v3.9.0 실행). react-router-dom <Link> 의 메뉴 역할을 하려면 <Select> 가 필요했습니다. 각 링크는 언어 설정에 해당하므로 드롭다운은 쿼리 매개변수의 현재 언어 값을 표시합니다.

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

이것은 최소한의 TypeScript 캐스팅이 필요하고 Material UI와 일관된 비주얼을 유지하는 가장 깨끗한 솔루션이었습니다.

@goyney 에는 솔루션이 있습니다. 감사합니다.

다른 사람이 우연히 발견한 경우를 대비하여 여기에 추가하려고 합니다.

v3.4에서는 다음과 같이 달성할 수 있습니다.

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

...

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

작동하고 깨끗한 솔루션, 감사합니다 ❤️

외부 링크의 경우 component="a" 하고 싶지만 MenuItem 에서 <li> MenuItem 도 둘러쌉니다.

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

그러면 다음 HTML이 생성됩니다.

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

팝업 메뉴가 있고 사용한다고 가정합니다.

'react-router-dom'에서 { 링크 } 가져오기;
'@material-ui/core/MenuItem'에서 MenuItem 가져오기;

\\

링크는 /your-path 페이지를 불러옵니다. 팝업 메뉴를 어떻게 닫을까요?