how to menu item redirect to a link using href?

Question

I'm using MenuItem from material-ui, and I want to open a link in a new tab when the menu item is clicked. I'm using simple: <MenuItem href="www.google.com" onClick={handleClose}> Google </MenuItem>

But nothing happens. Anyone know why?

score 6 · Accepted Answer · answered Nov 18 '20 at 17:54

6

Material-ui's MenuItem does not have an href prop, so it will pass that down to the root element (li tag by default).

If you want to use an href you would need to use an a tag as the component, which would then pass down the href to it instead of an li. To open it in a new tab you need to also give it a prop target="_blank".

Result:

<MenuItem 
  href="www.google.com"
  target="_blank"
  component="a" 
  onClick={handleClose}
> Google </MenuItem>

answered Nov 18 '20 at 17:54

Brian Thompson

13,263
4
23
43

Thanks! it worked, but im getting this page: http://localhost:3000/www.google.com instead just google.com, do you know why? – Caio Henrique Samarone Nov 18 '20 at 17:59
See [this answer](https://stackoverflow.com/a/43803872/9381601) for explanation of why the prefix is required. – Brian Thompson Nov 18 '20 at 18:01

score 0 · Answer 2 · answered Nov 18 '20 at 17:49

0

You can write in the onClick={window.location.href = "www.google.com"}

answered Nov 18 '20 at 17:49

Sandro Mennel

72
5

To open in a new Tab. Inside the onClick function add this: window.open( 'www.google.com', '_blank' // <- This is what makes it open in a new window. ); – Sandro Mennel Nov 18 '20 at 17:50

how to menu item redirect to a link using href?

2 Answers2