Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

can't use Link (from react-router) within MenuItem in 0.14.0-rc2 #2646

Closed
shiroganee opened this issue Dec 23, 2015 · 5 comments
Closed

can't use Link (from react-router) within MenuItem in 0.14.0-rc2 #2646

shiroganee opened this issue Dec 23, 2015 · 5 comments
Labels
component: menu This is the name of the generic UI component, not the React module!

Comments

@shiroganee
Copy link

Whenever I try to use Link within MenuItem it shows

Warning: validateDOMNesting(...): cannot appear as a descendant of . See Sidebar > MenuItem > ListItem > EnhancedButton > a > ... > Link > a.

Also, when I click the link I get in that place circle background in black.

@shiroganee shiroganee changed the title can't use Link (from react-router) within MenuItem can't use Link (from react-router) within MenuItem in 0.14.0-rc2 Dec 23, 2015
@alitaheri
Copy link
Member

MenuItem wraps it's children inside an <a></a> element, hence the error. We'll try to fix it as it causes to many issues. But if you're in a hurry a PR is always welcome ^_^

@shiroganee
Copy link
Author

Well I'm still at 0.13.4 at my project (and I need to release version 0.1 asap - especially that as you can see I'm sitting at christmas eve ;)). after that I might give it a try.
And about well I could expect that - I simply thought that maybe I was using it in improper way.

Merry Christmas anyway 👍

@DaxChen
Copy link

DaxChen commented Dec 29, 2015

Use the containerElement with linkButton props!

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

<MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  } />

@alitaheri
Copy link
Member

This was fixed with #2708

@jgentes
Copy link

jgentes commented Oct 3, 2016

Another workaround for this issue is to use <LinkContainer> from https://github.com/react-bootstrap/react-router-bootstrap

@zannager zannager added the component: menu This is the name of the generic UI component, not the React module! label Dec 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: menu This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

5 participants