How does React or Next make their tag not reload the page but content loads?

So, I’m now studying NextJS, using Link from ‘next/link’, something I couldn’t just figure out is eventually <Link> component renders an <a> tag, with href='/tosomewhere/' on it like this here:

Click to see  tag]

and when clicked, it just reloads some content WITHOUT REFRESHING PAGE. But the traditional <a> tag just refreshes the page..

How does React and Next manages to do that? I couldn’t find any information about it, can you eloborate me what relies under the hood?

Answer

I don’t know how they wrote the code, but I do this when I need to:

<a
  href="/home"
  onClick={(e) => {
    e.preventDefault()
    history.push('/home')
  }}
>
  Go to home
</a>

preventDefault would prevent the default behavior of the hyperlink.

I use this approach even when I have to create a dummy link (no eslint warning):

function doThis() {
  // open a modal, do logout, make an API call or anything 
}

...

<a
  href="/"
  onClick={(e) => {
    e.preventDefault()
    doThis()
  }}
>
  Do this
</a>