React Router

KDS-komponenttien käyttö React Router -kirjaston kanssa.

Yleistä

Navigaatiokomponenttien as-prop mahdollistaa erilaisten reitityskirjastojen (router) käyttämisen KDS-komponenttien kanssa. Kaikki KDS-linkkikomponentit toimivat vastaavasti.

Alla on esimerkkejä suositulle React Router(Avautuu uuteen välilehteen) -kirjastolle.

import { Link, useLocation, useMatch } from "react-router";

Esimerkissä LinkBox-komponentille annetaan as-propilla React Routerin Link(Avautuu uuteen välilehteen)-komponentti. Tämän jälkeen komponentille voidaan välittää kyseisen komponentin propit, kuten to, joka määrittää linkin osoitteen.

<LinkBox as={Link} to="/reseptit" icon={<IconDecoPills />} square rounded>
  Reseptit
</LinkBox>

NavLink

Esimerkki NavLink-komponentilla toteutettuna asettaa myös aktiivisen sivun. Tähän käytetään React Routerin useLocation(Avautuu uuteen välilehteen)- ja useMatch(Avautuu uuteen välilehteen)-hookkeja.

function RouterNav() {
  const pages = [
    {
      name: "Etusivu",
      to: "/",
    },
    {
      name: "Reseptit",
      to: "/reseptit",
    },
    {
      name: "Itse tallennetut tiedot",
      to: "/itse-tallennetut-tiedot",
    },
  ];
  const location = useLocation();
  const match = useMatch(location.pathname);

  return (
    <Nav aria-label="Päänavigaatio">
      {pages.map(({ name, to }) => (
        <NavListItem key={to}>
          <NavLink as={Link} to={to} active={to === match?.pathname}>
            {name}
          </NavLink>
        </NavListItem>
      ))}
    </Nav>
  );
}