MenuItem을 사용하여 탐색하는 방법은 무엇입니까? material -ui V1

Question

MenuItem가 다른 경로로 탐색하는 방법이 명확하지 않은 이유는 무엇입니까? 예를 들어

, 메뉴 아이템을 클릭, 나는 '/ 계정'

노선으로 할 때 나는 온 클릭 기능을 사용하여,하지만 난 쉬운 방법이 있는지 받았음을 달성하기 위해 관리 할 수 ​​있습니다. 우리 프로젝트에 그것을 구현하길 원한다고 말해주세요. 나는 다음과 같은 오류를 얻을 containerElement containerElement={<Link to="/dashboard" />}를 사용할 때 그런데

는 : 나는 containerElement하여 해당 오류를 수정

index.js:2177 Warning: React does not recognize the `containerElement` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 
    in li (created by ButtonBase) 
    in ButtonBase (created by withStyles(ButtonBase)) 
    in withStyles(ButtonBase) (created by ListItem) 
    in ListItem (created by withStyles(ListItem)) 
    in withStyles(ListItem) (created by MenuItem) 
    in MenuItem (created by withStyles(MenuItem)) 
    in withStyles(MenuItem) (at MenuAppBar.js:116) 
    in ul (created by List) 
    in List (created by withStyles(List)) 
    in withStyles(List) (created by MenuList) 
    in MenuList (created by Menu) 
    in div (created by Paper) 
    in Paper (created by withStyles(Paper)) 
    in withStyles(Paper) (created by Popover) 
    in Transition (created by CSSTransition) 
    in CSSTransition (created by Grow) 
    in Grow (created by withTheme(Grow)) 
    in withTheme(Grow) (created by Popover) 
    in div (created by Modal) 
    in Portal (created by Modal) 
    in Modal (created by withStyles(Modal)) 
    in withStyles(Modal) (created by Popover) 
    in Popover (created by withStyles(Popover)) 
    in withStyles(Popover) (created by Menu) 
    in Menu (created by withStyles(Menu)) 
    in withStyles(Menu) (at MenuAppBar.js:101) 
    in div (at MenuAppBar.js:92) 
    in div (created by Toolbar) 
    in Toolbar (created by withStyles(Toolbar)) 
    in withStyles(Toolbar) (at MenuAppBar.js:77) 
    in header (created by Paper) 
    in Paper (created by withStyles(Paper)) 
    in withStyles(Paper) (created by AppBar) 
    in AppBar (created by withStyles(AppBar)) 
    in withStyles(AppBar) (at MenuAppBar.js:76) 
    in div (at MenuAppBar.js:62) 
    in MenuAppBar (created by Connect(MenuAppBar)) 
    in Connect(MenuAppBar) (created by withStyles(Connect(MenuAppBar))) 
    in withStyles(Connect(MenuAppBar)) (at Test.js:9) 
    in div (at Test.js:7) 
    in Test (created by Route) 
    in Route (at App.js:37) 
    in Switch (at App.js:34) 
    in div (at App.js:32) 
    in Router (created by BrowserRouter) 
    in BrowserRouter (at App.js:31) 
    in div (at App.js:30) 
    in App (created by Connect(App)) 
    in Connect(App) (at index.js:34) 
    in MuiThemeProvider (created by MuiThemeProviderWrapper) 
    in MuiThemeProviderWrapper (at index.js:33) 
    in Provider (at index.js:32) 

- 오류가 사라졌다>containerelement, 즉 좋은 소식,하지만 나쁜 뉴스는 메뉴가 링크에 언급 된 암기를 위해 가지 않는다는 것입니다!

MenuAppBar.js

Updae

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import { withStyles } from 'material-ui/styles'; 
import AppBar from 'material-ui/AppBar'; 
import Toolbar from 'material-ui/Toolbar'; 
import Typography from 'material-ui/Typography'; 
import IconButton from 'material-ui/IconButton'; 
import MenuIcon from 'material-ui-icons/Menu'; 
import AccountCircle from 'material-ui-icons/AccountCircle'; 
import Switch from 'material-ui/Switch'; 
import { FormControlLabel, FormGroup } from 'material-ui/Form'; 
import Menu, { MenuItem } from 'material-ui/Menu'; 

import Button from 'material-ui/Button'; 

import { connect } from 'react-redux'; 
import {Link } from 'react-router-dom' 


const styles = { 
    root: { 
    width: '100%', 
    }, 
    flex: { 
    flex: 1, 
    }, 
    menuButton: { 
    marginLeft: -12, 
    marginRight: 20, 
    }, 
}; 

class MenuAppBar extends Component { 

    state = { 
    auth: true, 
    anchorEl: null, 
    }; 

    handleChange = (event, checked) => { 
    this.setState({ auth: checked }); 
    }; 

    handleMenu = event => { 
    this.setState({ anchorEl: event.currentTarget }); 
    }; 

    handleClose =() => { 
    this.setState({ anchorEl: null }); 
    }; 

    render() { 
    // console.log(this.props.auth) 
    // if(!this.props.auth) 
     // return <div> Loading... </div>; 

    const { classes } = this.props; 
    const { auth, anchorEl } = this.state; 
    const open = Boolean(anchorEl); 

    return (
     <div className={classes.root}> 



     {/* the log switch */} 
     {/* <FormGroup>   
       <FormControlLabel 
        control={ 
        <Switch checked={auth} onChange={this.handleChange} aria-label="LoginSwitch" /> 
        } 
        label={auth ? 'Logout' : 'Login'} 
       /> 
       </FormGroup>*/} 

     <AppBar position="static"> 
      <Toolbar> 

      {/* 
      <IconButton className={classes.menuButton} color="contrast" aria-label="Menu"> 
       <MenuIcon /> 
      </IconButton> */} 

      <Typography type="title" color="inherit" className={classes.flex}> 
       المواعيد 
      </Typography> 



      {/*If logged in */} 
      {this.props.auth && (
       <div> 
       <IconButton 
        aria-owns="menu-appbar-logged" 
        aria-haspopup="true" 
        onClick={this.handleMenu} 
        color="contrast" 
       > 
        <AccountCircle /> 
       </IconButton> 
       <Menu 
        id="menu-appbar-logged" 
        anchorEl={anchorEl} 
        anchorOrigin={{ 
        vertical: 'top', 
        horizontal: 'right', 
        }} 
        transformOrigin={{ 
        vertical: 'top', 
        horizontal: 'right', 
        }} 
        open={open} 
        onClose={this.handleClose} 
       > 
        {/*Changing font for this text is on the them and there search for subheading*/} 
        <MenuItem onClick={this.handleClose} containerelement={<Link to="/dashboard" />}>الملف الشخصي</MenuItem> 
        <MenuItem onClick={this.handleClose} href="/api/logout">تسجيل الخروج</MenuItem> 
       </Menu> 
       </div> 
      )} 
      {/*end*/} 




      {/*If logged out */} 
      {!this.props.auth && (
       <div> 
       <Button color="contrast" href="/auth/google/">تسجيل الدخول</Button> 
       </div> 
      )} 
      {/*end*/} 


      </Toolbar> 
     </AppBar> 


     </div> 
    ); 
    } 
} 

MenuAppBar.propTypes = { 
    classes: PropTypes.object.isRequired, 
}; 

function mapStateToProps({auth}){ 
    return {auth} 
} 

export default withStyles(styles)(connect(mapStateToProps)(MenuAppBar)); 

나는 SO에 게시물을 의미 씨 @Gavin 토마스 아래의 제안 된 솔루션에 의한 또 다른 문제를 발견했다. 문제는 즉

<MenuItem onTouchTap={() => {this.handleClose()}}><NavLink to="/api/logout">Sign Out</NavLink></MenuItem> 

http://localhost로 브라우저에 링크를 가진 끝, 바로 그 경로로 이동하지 않고 기존의 경로에 링크 된 URL의 속성 값 '에'언급 가하고 사용하는 것입니다 : 3000 /logout, nodejs 백엔드 서버의 로그 아웃 경로에 가지 마라! 그것은 문제입니다. 일반적으로

"proxy": { 
    "/api/*": { 
     "target": "http://localhost:5000" 
    } 
    }, 

을 다음과 같이 내가 프록시를 사용하도록

참고 5000에 3000에서 지시, 나는 그 추측 사이의 차이 때문에!

제 2 문제를 해결하도록 도와주세요. 우리가 발견 Heres는 무엇

Answer 1

...

당신은 이제 당신은 component 속성을 사용한다 링크 대>

React material-ui MenuItem containerElement not working

import React, { Component } from 'react'; 
import { NavLink } from 'react-router-dom' 
import Menu from 'material-ui/Menu'; 
import MenuItem from 'material-ui/MenuItem'; 
import Drawer from 'material-ui/Drawer' 

    <Drawer 
     docked={false} 
     open={this.state.open} 
     onRequestChange={(open) => this.setState({open})}> 
     <MenuItem onTouchTap={() => {this.handleClose()}} > 
       <NavLink to="/">Home </NavLink> 
     </MenuItem> 
     <MenuItem onTouchTap={() => {this.handleClose() }} > 
       <NavLink to="/about"> About Us </NavLink> 
     </MenuItem> 
    </Drawer> 

Answer 2

을 < NavLink를 사용해야합니다.

<MenuItem component={Link} to="/logout"> 
    Logout 
</MenuItem> 

containerElement 속성이 v0.x에 사용되어 더 이상 V1에 존재 하였다는 반응 라우터-DOM에서 Link 구성 요소를 사용하는 것이 괜찮습니다.