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?
3 Answers
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
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
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>
Related