Open link in external window tab

Question

can anyone help me with this problem? I'm trying to get the links to open in an external window tab, but I can't get that result with href.

Here is the code - src/utils/menu.js:

    const menu = [
      {
        name: 'App',
        sublinks: [
          { name: 'App Store', link: 'someLink' },
          { name: 'Play Store', link: 'someLink' },
        ]
      },
      {
        ...
          },
        ]
      }
    ]
    
    module.exports = menu

export default function Menu(props) {
  return (
    <StyledMenu tabIndex={0}>
      <StyledMenuTitle>
        <span style={{ marginRight: '0.25rem' }}>{props.data.name} </span>
        <MenuFlyout>
          {props.data.sublinks.map((item, index) => {
            return (
              <StyledMenuItem tabindex={index} key={index}>
                {item.link.split('.').slice(-1)[0] === 'pdf' ? (
                  <StyledExternalLink href={item.link} target="_blank" rel="noopener noreferrer">
                    <StyledTitle>{item.name}</StyledTitle>
                  </StyledExternalLink>
                ) : (
                  <StyledExternalLink href={item.link}>
                    <StyledTitle>{item.name}</StyledTitle>
                    {item.description && <StyledDescription>{item.description}</StyledDescription>}
                  </StyledExternalLink>
                )}
              </StyledMenuItem>
            )
          })}
        </MenuFlyout>
      </StyledMenuTitle>
    </StyledMenu>
  )
}

score 1 · Accepted Answer · edited Nov 08 '21 at 16:37

1

I don't see your view, but it looks like instead of

<a href={something.link}>{something.name}</a>

you should use

<a target="_blank" href={something.link}>{something.name}</a>

(add target="_blank" to your links).

edited Nov 08 '21 at 16:37

Amila Senadheera

12,229
15
27
43

answered Nov 08 '21 at 16:31

Lera Rosalene

119
4

Thank you for ur answer, but actually i cant edit it like this. I have to edit "... link: 'someLink' }, ..." - If i change it to "... link: href='someLink' }, ..." it doenst change anything and im not sure how to insert target="_blank" – Christoph Könekamp Nov 08 '21 at 17:22
where is your view? the actual thing that renders a menu? – Lera Rosalene Nov 08 '21 at 17:49
Hey, I hope this new information is exactly what u asked for! Just to make it clear, I don´t want every sublink to be in a new window. Only the first two sublinks of "App". Thanks in advance @lera – Christoph Könekamp Nov 09 '21 at 01:18
Where is your `StyledExternalLink` defined and how? – Lera Rosalene Nov 09 '21 at 06:47
1

Okay, now I added `target="_blank" rel="noopener noreferrer` after the second `StyledExternalLink` and it works, but now I have each menu link external. But I think I can go from this point on my own. Thank you @Lera! – Christoph Könekamp Nov 09 '21 at 12:24

score 0 · Answer 2 · answered Nov 09 '21 at 12:26

0

Use <StyledExternalLink href={item.link} target="_blank" rel="noopener noreferrer"> instead of <StyledExternalLink href={item.link} target="_blank" rel="noopener noreferrer**">"

target="_blank" is used to open links in new tabs

answered Nov 09 '21 at 12:26

Hamza Manan

126
1
3
13

Open link in external window tab

2 Answers2