In reactJS, how to invoke link click via button press?

Question

I have a button. When the users presses it, I want the outcome ot be the same as if the user had pressed a specific link.

Put another way, I want to represent a link as a button.

I can see from this that it is possible using Jquery: How to call a href by onclick event of a button?

What is the "correct" way to do this in ReactJS?

You can possibly use style anchor () tags and have a link in form of href. No need of ReactJS to handle it. — Pavan, Dec 10 '16 at 21:30

score 45 · Answer 1 · edited May 29 '20 at 07:59

45

Like this:

<button
    type="button"
    onClick={(e) => {
      e.preventDefault();
      window.location.href='http://google.com';
      }}
> Click here</button>

edited May 29 '20 at 07:59

Suz

83
1
6

answered Nov 20 '19 at 04:20

jmunox

459
4
3

Is adding `e.preventDefault()` necessary? It works fine without it as well. Could you please mention the purpose? – coderpc Jul 20 '21 at 15:49
Can we still use this method and target a new tab? – Lemon Oct 14 '21 at 12:20

score 20 · Answer 2 · answered Jan 22 '18 at 10:04

20

Use React-Router Link,instead of Anchor tag.

import React, { Component } from 'react';
import {Link} from 'react-router-dom'
 // reactClass --
    return (
      <div>
      <Link to='https://react.semantic-ui.com/'>
      <button type="button" className="btn btn-info">Button</button>
      </Link>
      </div>
    );
  // end--

answered Jan 22 '18 at 10:04

Saurabh

774
5
15

2

"Uncaught Error: You should not use outside a " – AlxVallejo Feb 27 '18 at 14:18
Whenever you try to show a Link on a page thats outside the BrowserRouter you will get that error. This error message is essentially saying that any component that is not a child of our cannot contain any React Router related components. You need to migrate your component hierarchy. – Saurabh May 30 '19 at 05:36
This is not openning a new tab neither overwrting the actual link showed at the address bar. – Sergio Rezende Nov 11 '19 at 18:23
1

In this case, a classic will work.So to solve what you are trying to achieve, the easiest way is to add a over your – Saurabh Nov 12 '19 at 16:57
Nesting `` and ` – Spikatrix Dec 15 '21 at 04:41
Hi, Have you faced any errors while implementing the answer? if I'm not wrong can you please check this answer, on the ref of your comment? Thank you :) https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 – Saurabh Dec 15 '21 at 14:04

martinarroyo · Answer 3 · 2017-09-21T09:06:38.623

4

You don't even need jQuery nor React to do that. It's as simple as this:

var ex = document.getElementById('ex');
ex.onclick = function(){
  console.log('clicked');
}

var bt = document.getElementById('bt');
bt.onclick = function(){
  ex.click();
}

<button id="bt">Click</button>
<a id="ex">Triggerable link</a>

Of course, in React you can store the ref of the components, bind to the event and then trigger the event like this:

onClick(){
    this.ex.click();
}
render(){
    return (
        <div>
          <button id="bt" onClick={this.onClick.bind(this)} ref={(ref)=>{this.bt = ref}}>Click</button>
          <a id="ex" onClick={()=>console.log("clicked")} ref={(ref)=>{this.ex = ref}}>Triggerable link</a>
        </div>
    )
}

Edit: If you just want a button that behaves like a link, you can use this, or any of the solutions listed in this question:

onClick(){
    window.location.href="http://url.com";
}
render(){
    return (
        <button id="bt" onClick={this.onClick}>Click</button>
    )
}

edited Sep 21 '17 at 09:06

answered Dec 10 '16 at 21:42

martinarroyo

9,389
3
38
75

can your ReactJS solution not have a separate link? I just want a button that results in the same thing as a link click, without there being a link. – Duke Dougal Dec 10 '16 at 22:03
Done. May I ask why exactly do you need it to be a button? – martinarroyo Dec 10 '16 at 22:52
I get "Adjacent JSX elements must be wrapped in an enclosing tag" when using – Daryl Spitzer Sep 19 '17 at 22:35
1

@DarylSpitzer my mistake, thanks for pointing it out. I wrapped the components in a `
`.
– martinarroyo Sep 21 '17 at 09:07
I would change one thing here. I would add a `{display: "none"}` style to the `` tag in your `ref`example – ASD May 13 '20 at 19:57

score 4 · Answer 4 · answered Oct 18 '21 at 21:25

4

2021 Update :

<div
    style={{
      width: 15,
      height: 15,
      background: "blue",
      cursor: "pointer",
    }}
    onClick={() => {
      window.open("http://google.com", "_blank");
    }}
  />

answered Oct 18 '21 at 21:25

Ghassane Aboughazaouat

333
4
7

score 1 · Answer 5 · answered Dec 19 '21 at 08:26

1

This worked for me :)

<a target="_blank" href="http://google.com"> <button id="bt" >Click</button> </a>

answered Dec 19 '21 at 08:26

Murugan Venkat

11
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 19 '21 at 10:36

score 0 · Answer 6 · answered Sep 03 '22 at 14:14

You can use the following code :

  import { useNavigate } from "react-router-dom";
    const handleClick = (url)=>{
       const navigate = useNavigate(); 
       navigate(url);
     }

The useNavigate hook returns a function that lets you navigate to a specific link

In reactJS, how to invoke link click via button press?

6 Answers6

2021 Update :