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

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

Answer 2

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