Router: Open link on a new tab

[enisyildiz]

How to open a link on a new tab ?

I want to open a link on a new tab. I shortened my code in below.

export default function () {
  const classes = useStyles();

  const [selectedIndex, setSelectedIndex] = React.useState(0);

  const handleListItemClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
    index: number,
  ) => {
    setSelectedIndex(index);
  };

  return (
    <div className={classes.root}>
      <Drawer
        variant="permanent"
        classes={{
          paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
        }}
        open={open}
      >
        <div className={classes.toolbarIcon}>
          <IconButton onClick={handleDrawerClose}>
            <ChevronLeftIcon />
          </IconButton>
        </div>
        <Divider />
        <List>
          <div>
            <Link className={classes.link} to=''>
              <ListItem
                button
                selected={selectedIndex === 0}
                onClick={event => handleListItemClick(event, 0)}
                >
                <ListItemIcon>
                  <DashboardIcon />
                </ListItemIcon>
                <ListItemText primary="Panel" />
              </ListItem>
            </Link>

            <Link className={classes.link} to='altkullanicilar'>
              <ListItem
                button
                selected={selectedIndex === 1}
                onClick={event => handleListItemClick(event, 1)}
                >
                <ListItemIcon>
                  <PeopleIcon />
                </ListItemIcon>
                <ListItemText primary="Alt Kullanıcılar" />
              </ListItem>
            </Link>
          </div>
        </List>
      </Drawer>
    </div>
  )
}

[edgarzapeka]

Just use an <a>

[mtliendo]

An anchor tag as suggested above will work and is really want you want if forwarding someone off of your site.

Though the accessibility feature surrounding this with a Link tag, is ctrl + click.

[jansila]

Would this be possible to implement, please?

[loonfly]

yeah. looking for such solution also. Might need to pass states to the new opened Link as well. example,

    <Link
      to="photos/123"
      state={{ fromFeed: true }}
      newTab={true} // Example
    />

[edgarzapeka]

@jansila @loonfly you can implement it yourself with your own interface
e.g.
export const ExternalLink = ({ href, text }) => { return <a href={href}>{text}</a> }