How to execute onclick before navigating to a different page?

Question

I am working in React and I have the following scenario.

  <a href={link} variant="primary" onClick={this.onClickDoSomething}>
                          here.
  </a>

Now, I want the onclick to execute before the link has been clicked. However I do not see it happening.

How to work around this issue ? Thanks.

remove the link from href and first handle onclick event after that redirect page to given link — Jatin Parmar, Apr 22 '19 at 17:20
the onclick should fire, my guess it is more of an issue what the onclick is doing. — epascarello, Apr 22 '19 at 17:21
I've got pretty much identical code and everything works fine for me.... onClick is firing and AFTER the browser will automatically navigate to the link's url. — RayLoveless, Dec 07 '21 at 20:49

Miroslav Glamuzina · Answer 1 · 2019-04-22T17:38:15.677

Note the onclick() will fire before the page is redirected. It appears that you may want to handle your navigation within your onclick function as opposed to having an href attribute. By doing it this way you can conditionally redirect (if need be) and/or wait for some async code to complete.

onClick = url => {
  alert('Do something');
  window.location.href = url;
}

<a href='#' onclick="onClick('https://stackoverflow.com')">here.</a>

React snippet:

class App extends React.Component {
  onClickDoSomething = link => ev => {
    alert(link);
    // Do any operations here
    window.location.href = link;
  }
  render() {
    const link = 'https://stackoverflow.com';
    return <div>
      <a href='#' onClick={this.onClickDoSomething(link)}>here.</a> 
    </div>;
  }
}

ReactDOM.render( <App/> , document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='app'></div>

you could throw in the attribute `href='#'` to get the styling if you would like — Miroslav Glamuzina, Apr 22 '19 at 17:30

Jatin Parmar · Answer 2 · 2019-04-22T17:58:48.340

0

your click handler should be like this

onClickDoSomething=(link)=>{
//do something,then redirect to given link
window.location.href=link

}

and you should render link as

<a  variant="primary" onClick={()=>{this.onClickDoSomething(link)}}>
                      here.
</a>

edited Apr 22 '19 at 17:58

answered Apr 22 '19 at 17:25

Jatin Parmar

2,759
5
20
31

Does cmd+click or ctrl+click default browser behavior still work using this solution? – RayLoveless Dec 01 '21 at 17:32
1

yes it will work with cmd+click and ctrl+click,but since no href is set it will open blank window when ctrl+click used – Jatin Parmar Dec 04 '21 at 18:36
1

Thanks for the response, If I put the link in the anchor's href it works fine and I don't need to do the manual window.location.href navigation. It runs the JS and then will automatically navigate. (tested in chrome, FF, and safari) – RayLoveless Dec 07 '21 at 20:51
have never checked like that, thanks for sharing info,but OP has already done this and he says its not working , if you see code in the quesiton he has given href and click handler to anchor tag. – Jatin Parmar Dec 08 '21 at 17:34

Nikhil Patil · Answer 3 · 2019-04-22T17:48:15.013

0

First will suggest use react router but if link is external then another way is keep href="#" and write onclickHandler function at the end onclickHandler just use window.location=[link]

you want to visit

Hope it helps

edited Apr 22 '19 at 17:48

answered Apr 22 '19 at 17:38

Nikhil Patil

318
2
15

Scott-MEARN-Developer · Answer 4 · 2022-07-19T08:48:42.840

All the given answers (i.e. using # for the href then adding window.location to your click handler) should work perfectly.

However, in case you're looking for another solution, you can also try making the link a button instead of an anchor tag, and just styling it as a button. Below I've done so using Bootstrap, but you could do so with just plain CSS as well:

handleClickExamQuestions =  function(URL){               
   window.location=URL       
 }

 <button class="btn btn-link" onClick = {()=>this.handleClick(URL)}>Click Me</button>

How to execute onclick before navigating to a different page?

4 Answers4

Linked