Question 189364 in Html Question posted in
Some basic documentation can be found here.

Html – what's the difference between <a> and <button> and <Link> from react-router-dom?

What’s the difference between these three tags feature?
Which one is the best practice?

<a href='/questions/aks'> Routing to Ask Question Page </a>

<Link to='/questions/aks' /> Routing to Ask Question Page </Link>

const handleButtonClick = () => {
  navigate('/questions/aks')
}
<button onClick={handleButtonClick}> Routing to Ask Question Page </button>

I’m writing CRA application using react, react-router-dom, styled-components
I want to change url path(routing) when user click html element.
I’ve tried three of them but I haven’t notice key difference.
Can anyone explain me about these concepts?

Tags:

2

Answers


  1. 0

    i think a tag is redirect there
    Link tag too
    when you using router? then you feel change maybe
    my answer is not sure

    Login or Signup to reply.
  2. 0

    Despite you can use these 3 for redirect these are some of the differences:

    • < a > element is the native browser element for redirection, it behaves without any extra javascript functionality and the browser is capable to understand back and forward buttons in the browser

    • < Link > is the react-router-dom React Component. It at the end renders < a > element in HTML and has logic inside of it, it uses react-router-dom API in order to work, once you use it you can take profit of some react-router-dom functionalities related to that library

    • < button > element is another native element in browser, the main difference between < a > and < button > is semantics, < a > is intended to be used with redirections and < button > to execute functions after click

    You can redirect with < button > and use onClick in < a > element but semantically will be incorrect.

    Semantics are the right using of the elements in HTML

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search