Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

139
Views
Open a link in new tab when a condition is true in React

There is a Tab component with multiple tabs, it is needed that when one of those tabs is clicked to open a link in a new tab in browser.

This is the code:

import { LocationDescriptor } from 'history';
import React, { AnchorHTMLAttributes } from 'react';
import { NavLink } from 'react-router-dom';

export interface ITabLinkItem extends AnchorHTMLAttributes<HTMLAnchorElement> {
  link: LocationDescriptor;
  name: string;
  disabled?: boolean;
}

export interface TabLinkProps {
  tabs: Array<ITabLinkItem>;
}

export function TabsLink({ tabs }: TabLinkProps) {
  const preventClick = (event: React.MouseEvent, disabled = false) => {
    disabled && event.preventDefault();
  };

  const clickTab = (event: React.MouseEvent, tab: ITabLinkItem) => {
    preventClick(event, tab.disabled);
    const { link } = tab;

    if (link === '/test') {
      // OPEN IN NEW TAB
    }
  };
  return (
    <div>
      {tabs.map((tab: ITabLinkItem, index: number) =>
        <NavLink
          key={index}
          to={tab.link}
          onClick={(event: React.MouseEvent) => clickTab(event, tab)}
        >
          {tab.name}
        </NavLink>
      )}
    </div>
  );
}

export default TabsLink;

Is it a way to trigger that tab opening when the condition is true?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You cannot maintain state in a new tab (so you will have to use cookies/localstate or some nifty database connections etc if you want that). So if this is the case and the new tab may be 'dumb' then why not use an a link with a target='_blank'.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!