CODEWITHSUNDEEP
reactjsreact-reduxreact-navigationreact-router-v4
deepak katara
deepak katara

Reputation: 63

difference between html tag "/href" and navlink or Link

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, so why there was need of introducing Navlink or Link?

Upvotes: 4

Views: 9648

Answers (3)

Praveen Rao Chavan.G
Praveen Rao Chavan.G

Reputation: 2860

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>

Upvotes: 1

Rubin bhandari
Rubin bhandari

Reputation: 1951

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

Upvotes: 2

Muljayan
Muljayan

Reputation: 3886

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

Upvotes: 7

Related Questions