difference between html tag “/href” and navlink or Link

Question

what is the difference between html tag \"/href\" and navlink provided by react-router to navigate the page? I can use both in order to navigate page to the different URL, s

Answer 1

The href attribute would trigger a page refresh which would reset the application states. However the link and navlink of react-router doesn't trigger a page refresh. Since React is used to create single page applications most of the time make sure you choose Link or Navlink when working with routing

Answer 2

When you need to use style or class attributes on active , then you can use navlink

Let see the example:

Link

a primary way to allow users to navigate around your application. will render a fully accessible anchor tag with the proper href.

<Link to="/">Home</Link>

NavLink

A special version of the that will add styling attributes to the rendered element when it matches the current URL.

<NavLink to="/" activeClassName="active">Home</NavLink>

Answer 3

If we were to create links using anchor elements such as href, clicking on them would cause the whole page to reload. React Router provides a <Link> component to prevent that from happening. When clicking a <Link>, the URL will be updated and the rendered content will change without reloading the page. So basically to sum up this navlink/ link provided by react doesnt refresh the page while href refreshes the page