Strategies for avoiding the opening of a new tab when clicking on a link in ReactJs

 RenderByTenantFunc({
            wp: () => (
              <Tooltip id="tooltip-fab" title="Home">
                <Button className="home-button">
                  <a
                    href={
                    GAIN_ENV.toLowerCase() === 'staging'
                      ? 'link1'
                      : 'link2'
                  }
                    rel="noopener noreferrer"
                  >
                    <div aria-label={translate('home')}>
                      <img
                        className="icon"
                        style={{
                          width: '22px',
                          height: '20px',
                          marginBottom: '-10px',
                        }}
                        src={SourceWpIcon}
                        alt={translate('home')}
                      />
                      <span className="home-button-text">Home</span>
                    </div>
                  </a>
                </Button>
              </Tooltip>
            ),
          })

When clicking on the Home button, a new browser tab is opened, which can be confusing for users who expect to stay on the current page. This issue persists even after removing target="_blank". I am unable to resolve this problem and would appreciate any assistance from fellow developers.

Answer №1

When it comes to the target attribute, the initial value is set to _blank. It's worth experimenting by switching it to _self for a different user experience.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating an element from its center with pure CSS

I've dedicated countless hours to uncovering a solution that can be achieved using only CSS. My goal is to create an animation on a div element where its height and width decrease uniformly when hovered over. <div class="a"></div> Above ...

Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap? In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the m ...

Using Javascript/JQuery to apply pixel values in CSS styling

Recently, I've come across a discrepancy between two different ways of accessing CSS properties in jQuery: <foo>.css('marginTop') (which I always assumed was the standard notation) and <foo>.css('margin-top') (which ...

Leveraging Material UI and TypeScript for Effective Styling: Maximizing the Use of !

Currently, I am in the process of developing a React application and incorporating Material UI for my components. One query that has arisen is regarding how to apply an !important property to a style. My attempt at achieving this looked like: <Paper cl ...

Learn how to pass a change event up the component hierarchy in react.js

I'm working on enhancing a material-ui text field to create a number input field. To ensure the validity of the input values and prevent invalid ones from propagating, I need the top container component to handle the change event only if the input is ...

Arrangement of items in a grid featuring a row of three items, each with an automatic width

I'm facing challenges with achieving a specific layout: https://i.sstatic.net/a5ETh.png https://i.sstatic.net/I7fuS.png My goal is to have the left and right elements automatically adjust their width to cover all the empty space on either side of t ...

Does the react key have scope limited to the local environment or does it have

After reading this intriguing article discussing the use of the index as a react key, I began to ponder. Imagine having two distinct lists: <List1> <el key="1" /> <el key="2" /> </List1> <List2> <other-el key="1" / ...

Separate a single large table into two smaller tables based on the information found in the third column of every row

Looking for a Greasemonkey script that can split a single table on a page into two separate tables based on a specific column. For example, if we have the following table: <table> <tr> <td>Jill</td> <td>Smith</td ...

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Check out my Website: Search Page I have written some CSS that functions well when searching by Name, but not by Specialty: .displayresult { display: block; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-st ...

The division element shifts to the left upon invoking the slideUp() function

I am currently working on a page that contains a form with two different sections - one is visible and the other is hidden. When the user clicks a button in the first section, it slides up using slideUp() while the hidden section slides down using slideDow ...

Guide to dynamically updating the href of an SVG Image in Angular HTML

I am currently iterating through a list of employee objects, each containing an image URL that I need to incorporate into an SVG - Image element. <div *ngFor ="emp of employees"> <defs> <pattern id = "attachedImage" height ...

Clicking to view all profiles expanding

An application is retrieving multiple profiles from an API. The goal is to display a profile's grades when its corresponding button is clicked. However, the current issue is that clicking any button shows all profile grades. const ProfileView = () =&g ...

I desire the div to display based on the conditions set in the PHP file

Hi, I am looking to display the div with ID "msga" when a certain condition is met and show the div with ID "msgb" when another condition is met. Here is my PHP code: if(isset($_POST['aa'])) { echo "a"; } if (isset($_POST['bb']))) { ...

What is the reason the text does not have a border around it?

The border is supposed to be around the text, but it isn't showing up. Where did I go wrong? Could it be that I need to set a position? html { width: 100%; height: 100%; margin: 0; padding: 0; } body { width: 100%; height: 100%; marg ...

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

Saving the previous component's DOM in a React application

Understanding the Root.js File const Root = () => ( <HashRouter> <div> <Route exact path="/" component={Main}/> <Route path="/main/:page" component={Main}/> <Route path="/detail ...

I'm experiencing difficulties with JS on my website. Details are provided below – any suggestions on how to resolve this issue

Can someone help me with a web project issue I'm facing? Everything was going smoothly until I tried to add some JS for dynamic functionality. However, when I attempt to access my elements by tag name, ID, or class, they always return null or undefine ...

Exploring the possibilities with New Relic and React

I am working with a react-router layout which currently contains a string that includes the New Relic javascript snippet. Now, I want to utilize the Browser Agent and set a custom attribute. newrelic.setCustomAttribute(name, value) The global variable n ...

Experimenting with a hover rule in the CSS of a React button

Currently, I am working on testing the visibility of an outline on a button at the unit test level. The technologies that I have been using for this task are React, React Testing Library, Jest, and Styled Components. React React Testing Library Jest Style ...

Enhance the header image by incorporating background "bars" that add color to the overall design. Alternatively, overlay an image on top of div

I designed a header image for my website, but I'm struggling to make it extend the full width of the user's web browser with black "bars" on the sides. I've attempted a few solutions, but haven't been successful so far. Currently, my c ...