score:0

Eslint says to use a button:

[eslint] Anchor used as a button. Anchors are primarily expected to navigate. Use the button element instead. [Error]

<button
    type="button"
    onClick={this.onBtnClick.bind(this, key)}
>
    {link[key]}
</button>

score:0

This is one of the easiest way:

<a href="/" onClick={this.handleClick}></a>

score:1

import { withRouter } from 'react-router-dom';
import Button from '../../components/CustomButtons/Button';

 onRegister = () => {
    this.props.history.push('/signupAsTeacher');
  };
<Button onClick={this.onRegister}> Contact Us </Button>

export default withRouter(functionName);

You must first import withRouter. Then you should give the page path to the button click event. The last one is the export withRouter.

score:2

For anchor tag in REACT, if we want to use onClick without URL change, then can use the following

<a
    style={{ cursor:"pointer" }}
    href={null}
    onClick={() =>
                  this.toggleModal("Rental Objects With Current Rent")
                }
 >
Click Me
</a>

OR

<a
        style={{ cursor:"pointer" }}
        href={void (0)}
        onClick={() =>
                      this.toggleModal("Rental Objects With Current Rent")
                    }
     >
    Click Me
    </a>

Note: Instead of cursor:pointer we can also use in CSS file

a:not([href]):not([tabindex]){
  cursor: pointer;
  color: #0086ce;
}

score:4

href="javascript:void(0)" is better than href="#".

href="#" will cause the url changed.

score:9

You may set cursor: pointer; for a link to achieve behavior of real url link :)

<a onClick={this.handleClick} style={{cursor: 'pointer'}}>click me!</a>

Related Query

More Query from same tag