Begrip: SPA Links

SPA links zijn links die gebruikt kunnen worden om te navigeren binnen een SPA zonder de pagina te moeten herladen.

React Router bevat een Link en NavLink component, beide componenten passen de URL in de adresbalk aan, maar doen dit zonder de pagina te herladen. Het verschil tussen de twee componenten is de opmaak. Aan een NavLink component kan via de property style of className een functie meegegeven worden die de opmaak aanpast als de link actief is. Verder is er geen verschil tussen de twee componenten. Elk van deze componenten heeft een to property die gebruikt kan worden om het pad door te geven waarnaar genavigeerd moet worden als op de link geklikt wordt.

import {Link, NavLink} from 'react-router';

const textLinkExample = <Link to="The path to navigate to">Link text on the website</Link>

const navLinkExample1 = (
  <NavLink to="The path to navigate to" 
           className={({isActive}) => isActive ? 'activeClass' : 'standardClass'}>
    Link text on the website
  </NavLink>
)

const navLinkExample2 = (
  <NavLink to="The path to navigate to" 
           activeStyle={'CSSProperties object with styling'}>
      Link naam op website
  </NavLink>
)